Question

我有一个非常简单的页面，在一个menu div中有两个div（content和main）。我无法弄清楚如何根据高度main或menu扩展content div高度，我现在只能为content div进行扩展。

你可以在这里看到这个小事：http://jsfiddle.net/nLjnn/

HTML结构：

<div class="main">
    <div class="menu"></div>
    <div class="content"></div>
</div>

CSS：

.main {
    width: 908px;
    padding: 10px 20px 20px 10px;
    background: red;
    -webkit-border-radius: 0px 5px 5px 5px;
    -moz-border-radius: 0px 5px 5px 5px;
    -khtml-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    -moz-box-shadow: 0 1px 1px rgb(159, 159, 159);
  -webkit-box-shadow: 0 1px 1px rga(159, 159, 159);
    box-shadow: 0 1px 1px rgb(159, 159, 159);
    min-height: 300px;
    height: auto;
    margin-left: 1px;
    display: block;
    position: relative;
}
.menu {
    width: 170px;
    min-height: 570px;
    left: 10px;
    position: absolute;
    display: block;
    background: yellow;
}
.content {
    width: 728px;
    min-height: 450px;
    margin-left: 180px;
    display: block;
    position: relative;
    background: gray;
}

menu div或content div中可以包含任意数量的内容，因此我需要分别缩放main div的高度。

Answer 1

您只需在提供的示例中取消绝对定位，并同时生成.menu和.content内嵌块;

.menu {
    display: inline-block;
    position: relative;
    width: 170px;
    min-height: 570px;
    background: yellow;
}
.content {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 724px;
    min-height: 450px;
    margin-left: 10px;
    background: gray;
}

如果不能满足需要，请告诉我。 fiddle here

Answer 2

在所有元素上使用float:left;应该有效

http://jsfiddle.net/nLjnn/3/

<div class="main">
    <div class="menu"></div>
    <div class="content"></div>
</div>


.main {
    padding: 10px 20px 20px 10px;
    background: red;
    -webkit-border-radius: 0px 5px 5px 5px;
    -moz-border-radius: 0px 5px 5px 5px;
    -khtml-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    -moz-box-shadow: 0 1px 1px rgb(159, 159, 159);
  -webkit-box-shadow: 0 1px 1px rga(159, 159, 159);
    box-shadow: 0 1px 1px rgb(159, 159, 159);
    position: relative;
    float:left;
}
.menu {
    width: 170px;
    min-height: 570px;
    float:left;
    background: yellow;
}
.content {
    width: 728px;
    float:left;
    min-height: 450px;
    margin-left: 10px;
    background: gray;
}

Answer 3

删除

position:absolute，

添加

display:inline-block;

并使用％调整宽度应该可以解决问题。我希望它会对你有所帮助。 Fiddle

Div定位，列问题

3 个答案: