html - 高度不适用于 float 模式下的两个 div

Question

我在回答这个问题时遇到了麻烦。非常简单:

HTML:

<div>
    <section class="left">

    </section>
    <section class="right">

    </section>
    <div class="clear"></div>
</div>

CSS:

div, section { border: 1px solid #000; }
.left { height: 100%; width: 200px; float: left; height: 200px; }
.right { width: 300px; float: right; height: 300px; }
.clear { clear: both; }

fiddler :http://jsfiddle.net/H2c6g/

我有这两个部分，我需要这两个部分都使用 100% 的可用高度。我有关于这两个部分的动态内容。有时右边大，有时左边大。放一个高度只是为了解释，但在我的真实示例中，没有这个固定高度。

谢谢大家。

Answer 1

如果您既不知道 child 也不知道 parent 的高度，就不可能使用相同的高度(因为 height = 100% 意味着下一个祖先的全高固定高度)。但是，有一些技巧。

相同高度的几种解决方案，来自css-tricks:

Fluid Width Equal Height Columns

codepen 中的一个工作示例:

Responsive Equal Height Divs

如果您不介意使用 javascript，也可以使用 css-tricks:

Equal Height Blocks in Rows

还有一些代码，来自 css-tricks 的第一个例子。你有你的 html:

<div class="five-columns group">
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>

还有 CSS。在这里，您只需制作一个垂直背景，使其看起来就像有 100% 高度的列，即使实际上没有。

.five-columns { 
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #eee),
        color-stop(20%, #eee),
        color-stop(20%, #ccc),
        color-stop(40%, #ccc),
        color-stop(40%, #eee),
        color-stop(60%, #eee),
        color-stop(60%, #ccc),
        color-stop(80%, #ccc),
        color-stop(80%, #eee),
        color-stop(100%, #eee)
    );      
    background-image: -webkit-linear-gradient(
        left, 
        #eee, 
        #eee 20%,
        #ccc 20%,
        #ccc 40%,
        #eee 40%,
        #eee 60%,
        #ccc 60%,
        #ccc 80%,
        #eee 80%,
        #eee 100%
    );
    /* Other vendors here */
}