HTML/CSS将div设置为兄弟的高度

Question

我有3个div包含在第三个.其中一个包含的div向左浮动,另一个向右浮动.我希望2兄弟div总是处于同一高度,但我遇到了这个问题.到目前为止,我只在Firefox中查看该页面,并且在我至少在一个浏览器中使用它之后发现我担心任何跨浏览器问题.

这是标记:

<div id="main-container" class="border clearfix">
    <div id="left-div" class="border">
        ...
    </div>
    <div id="right-div" class="border">
        ...
    </div>
</div>

这是CSS:

#main-container     { position: relative;                             min-height: 500px; }
    #left-div       { position: relative; float: left;  width: 700px; min-height: inherit; }
    #right-div      { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }

.clearfix:after     { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix           { display: inline-block; _height: 1%; clear: both; }
.clearfix           { display: block; clear: both; }
.border             { border: solid 1px #000; }

如果内容#left-div长于500px,#right-div则不扩展匹配.在我尝试了一个例子,说的Firefox的计算式的高度#main-container是804px,的计算式的高度#left-div是800px和的计算式的高度#right-div是586.2px的,因为它已经扩展到适合它自己的内容.

我明白我可能会以错误的方式解决这个问题,如果这是一个重复的问题,那么我道歉,但我不太确定要搜索什么.

Answer 1

我可以随心所欲地运用我的大脑,但我认为只有使用表行为才能解决这个问题,即使用<table>s(如果你需要兼容IE6和IE7)或者display: table / table-row / table-cell(这实际上是同样的事情,但不会让你难堪)在你的同龄人面前,因为桌子是邪恶的.;).

我去找一张桌子.

随意证明我的错误并发布一个理智的CSS解决方案,我很高兴!

Answer 2

如果您知道要设置页面布局高度的内部div,您可以执行以下操作:http://codepen.io/anon/pen/vOEepW

<div class="container">
  <div class="secondary-content">
    <div class="content-inner">
    </div>
  </div>
  <div class="main-content">
  </div>
</div>

将包含div设置为position:relative然后将其中一个内部div设置为position absolute允许另一个"un-styled"div有效地控制两者的高度.

.container {
  position: relative;
}
.main-content {
  width: 80%;
  margin-left: 20%;
  height: 300px;
  background-color: red;
}
.secondary-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  overflow-y: scroll;
}

也可以这样做,也许使用flexbox更容易,但这有一些浏览器支持问题.

Answer 3

您应该问自己的第一件事是 - 为什么需要它们处于相同的高度？是不是因为：

1. 您希望背景大小相同吗？
2. 中间边框高度相同吗？
3. 或者底部是否有一些内容需要与另一个 div 的底部内联显示？

1）如果您希望背景大小相同，那么我建议您对父 div 设置 CSS 样式，最坏的情况是编辑背景图像以使其适合。使用 CSS2，您可以轻松定位背景

{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
} 

2）每当我偶然发现你的问题时，我需要中心边框具有相同的高度。解决方案很简单 - 将边框样式应用于最长的 DIV。

3）将两个内容合并到第三个同级 DIV，如果不能，那么您将需要 JavaScript。或者正如 Pekka 所说 -display: table如果您不关心 IE，请使用。