我正在尝试为我的主页设计一个设计，其中我有一个带横幅和菜单的顶部，一个底部和一个由三个div组成的内容区域，它们彼此相邻。 我想在左边的不同的东西或只使用它作为间隔。 右栏将有一些横幅用于非营利性商业广告。 中间列将有很多内容，这个内容可能很长或很短，我希望这个内容只在这个列中，而不是浮动到两侧，因此我需要设计在高度上有点动态。真正的问题是我的容器不会随着中间的扩展内容而移动......
编辑： 我已经更新了这个例子，所以它更清楚地显示了我想要的内容。 我想要中间区域的所有内容以及左右两侧的其他东西，中间的这些东西可以变得很长，因此我希望中间列决定容器必须有多长时间 - 如果可能的话？如果我让容器移动，那么左右列将随之移动。
对不起，我的英语非常有限。
<!DOCTYPE html>
<html>
<head>
<style>
html
{
height:100%;
}
body
{
height:100%;
background-color:green;
}
.container
{
height:90%;
background-color:blue;
}
.left
{
width:150px;
height:90%;
float:left;
border: 2px solid #242F24;
margin:auto 5px 5px 5px;
padding:5px 5px 5px 5px;
background-color:yellow;
}
.right
{
width:200px;
height:90%;
float:right;
border: 2px solid #242F24;
margin: auto 5px 5px 5px;
padding:5px 5px 5px 5px;
background-color:grey;
}
.middle
{
width: auto;
background-color: red;
float: none;
margin:auto 5px 5px 5px;
padding:5px 5px 5px 5px;
height:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left<br>Lorem Ipsum.....</div>
<div class="right">Right<br>Lorem Ipsum.....</div>
<div class="middle">Middle<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
答案 0 :(得分：0)
尝试使用实际高度而不是最小高度。 可以使用溢出来控制高度。 min-height允许容器增长到内容的大小。