Question

我正在建造一个中间有3个部分的网站，这些部分并排放置。中间框是页面内容的显示位置，因此将调整为适合。

问题是#leftnav和#rightnav应该调整到父容器的高度，这可以在#centralcontent高度由其内容（文本等）调整时起作用 - 这是如何做得最好的？ / p>

请参阅操作代码：http://jsfiddle.net/AlexHighHigh/WJKR5/

这是HTML

<div id="pagecontainer">
<div id="header"><img src="http://s23.postimg.org/u4fk339vf/design_1_01.jpg" width="850" height="308" alt="logo" /></div>

<div id="centralcontainer">
<div id="leftbar">&nbsp;</div>
<div id="centralcontent">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="rightbar">&nbsp;</div>
</div>

<div id="footer"><img src="http://s23.postimg.org/w6g1hc7uj/design_1_05.jpg" width="850" height="30" alt="footer" /><br />
&copy; 2014 Surrey Hills Fox Control</div>
</div>

..这里是CSS

body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #161616;
margin: 0;
padding: 0;
color: #fff;
}
#pagecontainer {
height: 100%;
width: 850px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */

}
#header {
height: 308px;
background-color:#66CCFF;
}
#centralcontainer {
height: auto;
width: 850px;
}
#leftbar {
float: left;
width: 85px;
min-height: 100%;
background-image:url(http://s23.postimg.org/69md4q46z/design_1_02.jpg);
bottom: 0;
background-color:#66CCFF;
}
#centralcontent {
float: left;
height: auto;
width: 680px;
background-color:#FFF;
}
#rightbar {
float: left;
width: 85px;
min-height: 100%;
background-image:url(http://s23.postimg.org/lxnkbijsr/design_1_04.jpg);
bottom: 0;
background-color:#66CCFF;
}
#footer {
float: left;
width: 850px;
height: 150px;
text-align:center;
}

任何帮助表示感谢，提前谢谢！亚历

Answer 1

将height: 100%;添加到body，它会起作用

为什么会这样？你的#pagecontainer有height:100%，所以它会设置100％的是pagecontainer的父级，这是正文，但您尚未设置body

的高度

修改

我看到您使用了floats，如果对您有好处，请使用display :table，因为它可以帮助您避免clear float和其他内容。 see demo

body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background: #161616; margin: 0; padding: 0; color: #fff; height : 100%; } #pagecontainer { height: 100%; width: 850px; margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */ } #header { height: 308px; background-color:#66CCFF; border:1px solid #FFF; } #centralcontainer { min-height: 100%; width: 850px; display:table; } #leftbar { display:table-cell; width: 85px; min-height: 100%; height:100%; background-image:url(http://s23.postimg.org/69md4q46z/design_1_02.jpg); bottom: 0; background-color:#66CCFF; border:1px solid #FFF; } #centralcontent { display:table-cell; height: 100%; width: 680px;  } #rightbar { display:table-cell; width: 85px; min-height: 100%; background-image:url(http://s23.postimg.org/lxnkbijsr/design_1_04.jpg); background-color:#66CCFF; } #footer { float: left; width: 850px; height: 150px; text-align:center; }

Answer 2

Working Demo

我在您的CSS中添加了其他一些内容以获得更好的跨浏览器兼容性，但如果您真的需要，可以将其删除。

CSS：

html, body {
    margin: 0;
    padding: 0;
    zoom: 1;
    height: 100%;
    width: 100%;
}
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #161616;
    color: #fff;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    clear: both;
    display: table;
}
#centralcontainer div {
    outline: 3px solid red;
}
#pagecontainer {
    height: 100%;
    width: 850px;
    margin: 0 auto;
}
#header {
    height: 308px;
    background-color:#66CCFF;
}
#centralcontainer {
    width: 850px;
    position: relative;
}
#leftbar {
    position: absolute;
    width: 85px;
    background-color:#66CCFF;
    background-image:url(http://s23.postimg.org/69md4q46z/design_1_02.jpg);
    bottom: 0;
    top: 0;
    left: 0;
}
#centralcontent {
    left: 85px;
    position: relative;
    height: auto;
    width: 680px;
    background-color:#FFF;
}
#rightbar {
    position: absolute;
    width: 85px;
    background-color:#66CCFF;
    background-image:url(http://s23.postimg.org/lxnkbijsr/design_1_04.jpg);
    bottom: 0;
    top: 0;
    right: 0;
}
#footer {
    float: left;
    width: 850px;
    height: 150px;
    text-align:center;
}

Answer 3

您好，您可能应该将common fix用于相同的列高度

在您的情况下，只需将overflow:hidden;添加到#centralcontainer和

#leftbar,#rightbar

添加

padding-bottom:9000px;
margin-bottom:-9000px;

请期待 Seems working sample

CSS高度调整

3 个答案:

Working Demo

CSS：