#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

我知道这个问题已经有很长一段时间了，但我找到了一个简单的解决方法，并且认为有人可以使用它(对不起，英语不好)。是这样的:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

简单的例子。注意，您可以将其转换为响应性。

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

看看这个例子。

如果你不介意导航div在意外的短内容div事件中被剪辑，至少有一个简单的方法:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

除此之外，还有假柱技术。

要做到这一点，最简单的方法就是假装。《A List Apart》多年来对此进行了广泛的报道，比如Dan Cederholm 2004年的一篇文章。

我通常是这样做的:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

您可以通过将#container包装在另一个div中，将标题div嵌入为#container的兄弟，并将边缘和宽度样式移动到父容器中，轻松地在此设计中添加标题。此外，CSS应该移动到一个单独的文件，而不是保持内联等等。最后，clearfix类可以在positioniseverything上找到。

对于父节点:

display: flex;

您应该添加一些前缀，例如http://css-tricks.com/using-flexbox/。

正如@Adam Garner所指出的，align-items:拉伸;不需要。它的用法也适用于父母，而不是孩子。如果你想定义儿童拉伸，你使用align-self。

.parent { 背景:红色; 填充:10 px; 显示:flex; ｝ .other-child { 宽度:100 px; 背景:黄色; 身高:150 px; 填充:.5rem; ｝ .child { 宽度:100 px; 背景:蓝色; ｝ < div class = "父" > < div class = "另一个孩子“> 仅用于拉伸父节点 < / div > < div class = "孩子" > < / div > < / div >