1

絶対配置を使用せずにdiv(ビューポートのサイズではない)をビューポートの下部に伸ばす方法は?

絶対配置を使用して「メイン」div をビューポートの一番下まで伸ばすと、「メイン」div がもはや正常な流れではありません。

そして、絶対的なルートに行かなければならない場合、通常のフローで動的 div (またはその他を含む) を追加/削除するたびに、影響を受ける要素の上下の位置を再計算したくありません。

フィドル


HTML:

<div id="wrapper">
    <div id="header">
        HEADER<br>
        <input id="btnNavBar" type="button" value="add/remove nav bar"/>
    </div>
    <div id="main">
        MAIN CONTENT NEEDS TO STRETCH TO BOTTOM OF VIEWPORT, BUT NOT BE ABSOLUTE SO THAT IT WILL AUTOMATICALLY ADJUST FOR ANY NEWLY ADDED DYNAMIC ELEMENTS ABOVE IT SINCE IT'LL STILL BE IN THE NORMAL FLOW.
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0px;
}
#wrapper {
    height: 100%;
    background-color: black;
}
#header {
    height: 50px;
    text-align: center;
    background-color: red;
}
#main {
    background-color: gray;
    height: 100%;
}
/* UNCOMMENT THIS SECTION TO MAKE THE STRETCHING WORK WITH ABSOLUTE POSITIONING, 
    BUT NOT FOR ANY NEWLY ADDED ELEMENTS */
/*#wrapper {
    position: relative;
}
#main {
    height: auto;
    position: absolute;
    bottom: 0px;
    top: 50px;
}*/

JS:

$('#btnNavBar').click(function(){
    var $navBar = $('#navBar');
    if ($navBar.length == 0)
    {
        $('<div>').prop('id','navBar').css({'height':'20px', 
            'background-color':'yellow', 'text-align':'center'})
            .text('Dynamically Added Nav Bar').insertAfter('#header');
    }
    else
        $navBar.remove();
});
4

1 に答える 1

2

これをCSSに追加します

#wrapper:before
{
    content: '';
    float: left;
    height: 100%;
}
#main:after
{
    content: '';
    display: block;
    clear: both;
}

からを削除height:100%します#main

働くフィドル

テスト済み: IE10、IE9、IE8、FF、Chrome。

  1. マークアップを変更していません
  2. 絶対配置を使用しませんでした
  3. スクリプトを使用しませんでした (純粋な CSS ソリューション)
  4. 流動的なレイアウト
  5. クロスブラウザ
于 2013-09-12T21:00:18.500 に答える