标记：

<div>
  <div></div>
  <div></div>
</div>

在不同的视口.innerTwo的内容比.innerOne的内容高,但我希望它的背景与.innerTwo的大小相同.

样式：

.container {
   width: 100%;
   height: auto;
   background-color: yellow;   

   /* clearfix */
   *zoom: 1;
   &:before,&:after {
     display: table;
     content: "";
     line-height: 0;
   }
   &:after {
    clear: both;
   }
}

.inner {
   float: left;
   width: 50%;
   height: 100%;
   background-color: red;
}

但高度不会匹配.我知道可以通过给容器设置一个高度来完成,但我不想这样做,因为它是一个响应式站点.这可能吗？我宁愿不使用JS.

.container{
    width:100%;
    border:1px solid red;
    display:table;
}
.inner{
    display:table-cell;
    background:green;
    width:50%;
}
.innerTwo{
    background:blue
}

检查这个http://jsfiddle.net/XXHTC/

body { 
    height: 100%; 
    min-height: 100%;
    position: relative;
}

mydiv { 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0;
    width: 290px;
}

我读了很多答案，特别是这个(Prestaul答案)：
Setting 100% height on an absolutely positioned element when the content expands past the window size。

但对我来说这个伎俩不行，小提琴的例子也不行！

This is the jsfiddle working example.

This is the same code that doesn’t work.

body { position:relative;}

它为我工作

http://throwbackhero.com/index1.php

问题是我将身体设置为高度：100％;在样式表和#wrapper div中也是如此.高度偏离当前页面高度,并没有考虑到其他div可能导致溢出.

我想,即使浏览器的垂直大小发生变化,空白页面也是浏览器的大小,内容/包装器div将缩小以适应.

可以这样做吗？

编辑

好的,我原来的问题非常混乱.这是一张照片;

所以,在图1(左)是问题.高度100％;在包装器和内容div上,它正在创造那个坏孩子.我希望它看起来像图片,白色/灰色区域根据浏览器的大小增长/缩小…

height: 100vh;

其中’vh’代表浏览器窗口的垂直高度.响应调整浏览器和移动设备的大小.

我尝试了各种高度,最小高度等排列,但无济于事.

我应该只使用表格吗？

.edit-me {
height:100%; /*does not behave the same as Chrome*/
width:10px;
border:1px solid blue;
background:red;
float:left;
overflow: auto;
}

在Chrome上打开页面,然后在Firefox上打开.蓝色div不继承

有没有解释为什么会这样？任何修复？纯HTML / CSS解决方案更可取.

我一直在这个狗屎几个小时试图让CSS表现出来,当我终于做FF时这样做.吃掉我的开发时间.

tr,td { height: 100%; }

一般来说,要获得高度：100％才能正常工作,必须同时设置元素父母的所有高度.

编辑：

另一种解决方案是用容器div包装td的内容并使用绝对定位来确保.edit-me div有效地具有100％的高度.

以下是HTML的外观：

<table border="1">
    <tr>
        <td>
            <div>
                <div></div>
                Foo
                <br/>
                Bar
            </div>
        </td>
        <td>hello</td>
    </tr>
</table>

和CSS：

.container {
    position: relative;
    padding-left: 10px;
}

.edit-me {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width:10px;
    border:1px solid blue;
    background:red;
    overflow: auto;
}

希望这可以帮助！