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 に答える