0

我正在尝试为我的主页进行设计,其中我有一个带有横幅和菜单的顶部、一个底部和一个由三个彼此相邻的 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>
4

1 回答 1

0

尝试使用实际高度而不是最小高度。高度可以使用溢出来控制。min-height 允许容器增长到内容的大小。

于 2013-01-30T22:12:49.873 回答