0

基本上，我不知道如何解决它，我需要左右列从页眉到页脚的高度为 100%。这样我就可以调整窗口大小，并且所有内容都将保留在同一个地方。

但是，我的代码不起作用，左右列与页脚重叠。

HTML：

<section id="wrapper">

<header id="topHeader">
header
</header>

<section id="leftSection">
left<br>
</section>


<section id="middleSection">
middle
</section>

<section id="rightSection">
right
</section>



</section>
<footer id="footer">
footer
</footer>

CSS：

html,body{
    margin: 0;
    padding: 0;
    font: 13px/22px Helvetica, Arial, sans-serif;
    background: #F0F0F0;
    height:100%;
}

#wrapper{
border: solid 1px;

height: 100%;
}


#topHeader{
height: 40px;
}

#leftSection{
border: solid 1px;
border-color: #000000;

position: absolute;
left: 0px;
width: 150px;
margin: 0px;
padding: 0px;

height: 92%;
min-height:200px;
max-height:600px;
}

#rightSection{
border: solid 1px;
border-color: #000000;

position: absolute;
right: 0px;
top:41px;
margin-bottom: 41px;
width: 200px;
color: #564b47;
margin: 0px;
padding: 0px;

height: 100%;
}

#middleSection{
border: solid 1px;
border-color: #000000;

margin: 0px 201px 0px 151px;
padding: 0px;

height:auto;
}

#footer{
border: solid 1px;
border-color: #000000;

clear:both;
height: 100px;
width:100%;
}

http://jsfiddle.net/bPTtU/

4

1 回答 1

0

只要你的页眉和页脚有一个固定的高度，并且两个侧边栏都有一个固定的宽度，你应该可以使用绝对定位。看看这个：http: //jsfiddle.net/bPTtU/29/

除了标头之外，所有块都是绝对定位的。该技术非常简单：

top: #px; /* outer height of the content above */
left: #px; /* outer width of the content to the left */
right: #px; /* outer width of the content to the right */
bottom: #px; /* outer height of the content below */

通过在定位绝对（或固定）时设置超过 2 个坐标，您可以使宽度和/或高度动态化，正如您在调整我的小提琴大小时会注意到的那样。另请注意，我删除了边框，并将其更改为背景颜色，导致边框添加到元素的宽度/高度。您可以保留边界，但是在设置坐标时必须考虑它们（以及填充）。

于 2013-06-29T22:27:14.523 回答