0

ヘッダー、コンテンツ、フッターを含む単純な div があります。現在、問題は、div の下部にギャップがあることです。また、ブラウザー ウィンドウのサイズを変更すると、divにさらに余分なwhite-spaceものが追加されます。bottom

leftContainer 全体が である必要がありbrowser heightます。

たとえば、私はこのようなものが必要です（実際、これはフラッシュで行われます。HTMLで行われることを望みます）

これが今の様子です：

ここに画像の説明を入力

ここに私のCSSがあります:

html, body
{
     margin: 0; 
     border: 0 none; 
     padding: 0; 
          overflow: hidden;
}
html, body, #wrapper, #left, #right 
{
     height: 100%; 
     min-height: 400;
}
.leftContainer 
{
    width:308px;
    max-height: 100%;
    height:100%;
    border-style: solid;
    border-width: 2px 0px 0px 0px;
    background-color: #ffffff;
    box-shadow: 0px 0px 7px #292929;
    -moz-box-shadow: 0px 0px 7px #292929;
    -webkit-box-shadow: 0px 0px 7px #292929;
}
.mainbody
{
    padding-left: 5px;
    margin-top: 0;
    min-height: 150px;
    max-height:736px;
    height: 100%;
    background-color: #F9F9F9;
}
.header
{

    height: 40px;
    color: #000;
    border-bottom: 1px solid #EEE;
}

.footer 
{
    padding-left:20px;
    height: 40px;
    background-color: whiteSmoke;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}​

HTML:

<div class="leftContainer ">
<div class="header">Header</div>
<div class="mainbody">
    <p>Body</p>
</div> 
<div class="footer">Footer</div>
</div>

フッターを分離したくないので、親の div( leftContainer)内に配置する必要があります

デモ

4

6 に答える 6

1

追加してみましたか

position: relative;

あなたの .leftContainer と

position: absolute;
bottom: 0;
left: 0;
right: 0;

あなたの .footer に？あなたが望むものを作るべきです。

見てみましょう: http://jsfiddle.net/UqJTX/7/embedded/result/

于 2012-05-11T07:05:37.190 に答える
0

これを次のように使用しますmin-height:100%

あなたの役に立ちますように

于 2012-05-11T08:11:36.900 に答える
0

このデモをチェックしてください。正常に動作します

于 2012-05-11T07:35:54.630 に答える
0

各 div の幅をパーセンテージで指定する必要があります。左側のコンテナーの高さの合計は 100% で、3 つの div (ヘッダー 10%、本文 85%、フッター 5% など) の高さを適切なパーセンテージで決定します。高さや幅をピクセル単位で言及することはお勧めできません。

firebugHTML と CSS の簡単なデバッグに 使用します。

于 2012-05-11T07:16:21.697 に答える