1

以下のこのコード（ここではjsFiddle）の中央のセクションを、固定値やJavascriptを指定せずに、実際のコンテナーの高さに調整する方法はありますか？このフィドルでは、コンテナの絶対値と相対値を設定しようとしましたが、コンテナの高さが実際のページの高さを超えているため、ページには常に垂直スクロールバーが表示されます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body { margin: 0; height:100%;}
        #mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
        #headerContainer { width: 100%; position: relative; background: #323232; color: white; height: 30px; }
        #middleContainer { height: 100%; }
        #leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
        #middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
        #rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
        #footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
    </style>
</head>
<body>
    <div id="mainContainer">
        <div id="headerContainer">
            headerContainer
        </div>
        <div id="middleContainer">
            <div id="leftSection">
                <div style="margin-top: 30px;">leftSection</div>
            </div>
            <div id="middleSection">
                <div style="margin-top: 30px;">middleSection</div>
            </div>
            <div id="rightSection">
                <div style="margin-top: 30px;">rightSection</div>
            </div>
        </div>
        <div id="footerContainer">
            footerContainer
        </div>
    </div>
</body>
</html>

</ p>

4

3 に答える 3

2

これはあなたが望むことをするようです：

http://jsfiddle.net/grc4/XTQuT/2/

アブソリュートポジショニングは#middleContainer、#footerContainer通常の流れから外れます。#middleContainerページ全体のサイズを占めるように強制されますが、ヘッダーとフッター用のスペースを確保するためのマージンが与えられます。#footerContainerページの下部に。で固定されていますbottom: 0。左と右の列はheight: 100%、右のスペースを占有するために使用できますが、中央の列は、残りのスペースのみを使用するように強制するために、絶対位置を指定する必要があります。

于 2012-10-04T08:44:50.863 に答える
1

................................。

こんにちはマヤ私は、このデモをチェックするよりも、はいの場合、コードでテーブルプロパティを使用できることをお勧めします

HTML

<div class="wrap">

  <div class="header">header</div>
  <div class="conternt">
  <div class="left">Left sdaf dsaklf jdslkaf jdlskfj dlskafj dslkf jdslkf jsdlakfj sdlakfj sdlkf jlsdkfj sladkfj sdalkfj sadlkf </div>
  <div class="center">Center flexible</div>
  <div class="right">right</div>
  </div>
  <div class="footer">footer</div>

</div>

Css

.header{
background:green;
  color:#fff;
  padding:20px;
}

.conternt{
background:yellow;
  display:table;
  width:100%;
}
.left, .right, .center{
display:table-cell;
  color:#fff;
}
.left, .right{
width:100px;
}
.left{
background:rgba(0,0,0,0.5)
}
.center{
background:rgba(0,0,0,0.1)
}
.right{
background:rgba(0,0,0,0.9)
}



.footer{
background:red;
  color:#fff;
  padding:20px;

}

ライブデモ

于 2012-10-04T08:26:51.753 に答える
0

他のdivでも同じように、両方の高さとピクセルではなくパーセンテージで指定し#footerContainerます。#headerContainerこのフィドルでは、ヘッダーとフッターに10％、すべての中間divに80％を割り当てました。

于 2012-10-04T08:28:58.140 に答える