Question

我正在做一些HTML，并且我遇到了一个问题，我的左右列div没有根据其中的内容进行缩放，也与页面的其余部分成比例。

我的每个div的CSS：

#wrapper{
    background:white;
    width:1280px;
    position:relative;
    border: 1px solid black; /* black border */
    margin:auto; /* centre this div */  
}
#header{
    height:90px;
    text-align:center;
    padding: .5em;
    background-color: grey;
    border-bottom: 2px solid black;
}
#leftmenu{
    width:100px;
    float:left;
    font-size: 75%;
    padding:.5em;
    border-right:2px solid black;
    border-left:2px solid black,
}
#rightmenu{
    width:180px;
    float:right;
    font-size: 75%;
    padding:.5em;
    border-left:2px solid black;
    border-right:1px solid black;
}
#content{
    background-color:white;
    margin-left:120px;
    font-size: 80%;
}
#footer{
    clear:both; /* push footer under other divs */
    height: 70px;
    background-color:white;
    border-top:1px solid black;
    border: 1px solid black;
    padding-top:40px;
    text-align:center;
    font-size: 70%; 
}

如何根据其他div中的内容确保我的div调整大小？

谢谢！

Answer 1

如果没有看到您的HTML，请点击此处：

JSFiddle此处：http://jsfiddle.net/2hf8q/

CSS

html, body  {
    height: 100%;
}

#wrapper {
    height: calc(100% - 2px); /* for border */
}

#leftmenu, #rightmenu {
    height: calc(100% - 234px); /* for header, footer */
}

#wrapper {
    background:white;
    width:100%;
    position:relative;
    border: 1px solid black;
    /* black border */
    margin:auto;
    /* centre this div */
}
#header {
    height:90px;
    text-align:center;
    padding: .5em;
    background-color: grey;
    border-bottom: 2px solid black;
}
#leftmenu {
    width:100px;
    float:left;
    font-size: 75%;
    padding:.5em;
    border-right:2px solid black;
    border-left:2px solid black;
}
#rightmenu {
    width:180px;
    float:right;
    font-size: 75%;
    padding:.5em;
    border-left:2px solid black;
    border-right:1px solid black;
}
#content {
    background-color:white;
    margin-left:120px;
    font-size: 80%;
}
#footer {
    clear:both;
    /* push footer under other divs */
    height: 70px;
    background-color:white;
    border-top:1px solid black;
    border: 1px solid black;
    padding-top:40px;
    text-align:center;
    font-size: 70%;
}

HTML

<div id="wrapper">
    <div id="header"></div>
    <div id="leftmenu"></div>
    <div id="content"></div>
    <div id="rightmenu"></div>
    <div id="footer"></div>
</div>

Answer 2

您可以将#leftmenu，#content和#rightmenu包装在显示为表格的div中。并将三个孩子显示为表格单元格：

HTML：

<div id="header">#header</div>
<div id="wrapper">
    <div id="leftmenu">#leftmenu</div>
    <div id="content">#content</div>
    <div id="rightmenu">#rightmenu</div>
</div>
<div id="footer">#footer</div>

CSS（没有颜色，填充，字体大小和东西）：

html, body {
    margin: 0;
    padding: 0;
}
#header{
    height:90px;
}
#wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}
#wrapper > div {
    display: table-cell;
}
#leftmenu{
    width:100px;
}
#rightmenu{
    width:180px;
}
#content{

}
#footer{
    height: 70px;
}

和working demo。

动态尺寸分区

2 个答案: