4

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

这是我的例子：http: //i.imgur.com/9vi2EK9.png

以及每个 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 中的内容调整大小？

谢谢！

4

2 回答 2

3

在没有看到您的 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>
于 2013-09-10T14:11:18.057 回答
1

您可以通过包装#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;
}

和一个工作演示。

于 2013-09-10T15:12:04.603 回答