-1

すぐ下にフッターがある固定サイズの外側要素があります。要素の内部には 2 つのセクションがあります。1 つ目は固定の高さで、2 つ目は拡張して他の要素を埋める必要がありますが、オーバーフローしないようにする必要があります。

披露させて。

どうすればいいですか？2 番目の要素を設定height: 100%すると、外側の要素をオーバーフローさせ、フッターをオーバーランさせます。私が見る唯一の他の選択肢は、高さをピクセル単位で明示的に設定することです。これは混乱するようです。

これを行う正しい方法は何ですか？

編集:設定overflow-y: hiddenはこの非常に限定された例で機能しますが、実際には制限されておらず境界半径section.inner2を指定したい場合は奇妙に見えますsection.inner2

4

2 に答える 2

2

私が考えることができる最も簡単な解決策 (あまり考えていません) は、http://jsfiddle.net/WLZmT/3/position: absolute;を使用することです。

HTML :

<div id="outer">
    <div id="fixed">
        Fixed.
    </div>
    <div id="fluid">
        Fluid.
    </div>
</div>

CSS :

#outer {
    position: relative;
    background: rgb(255, 200, 200);
    padding: 10px;

    height: 400px;
}

#fixed {
    height: 100px;
    padding: 10px;

    background: rgb(200, 255, 200);
}

#fluid {
    padding: 10px;
    background: rgb(200, 200, 255);

    position: absolute;
    top: 100px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}
于 2012-05-18T03:34:32.807 に答える
0

このような？

<!DOCTYPE HTML>
<html>
<head>

    <title></title>


    <style media="screen" type="text/css">
    html,
    body {
        margin:0;
        padding:0;
        height:100%;
    }
    #container {
        left:50%;
        min-height:100%;
        position:relative;
    }
    #header {
        background:#ff0;
        padding:10px;
    }
    #body {
        padding:10px;
        padding-bottom:60px; /* Height footer */
    }
    #footer {
        position:absolute;
        bottom:0;
        width:100%;
        height:60px;            /* Height of the footer */
        background:#6cf;
    }


    </style>
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    #container {
        height:100%;
    }
    </style>
    <![endif]-->
</head>
<body>

<div id="container">
    <div id="header">
        head
        <!-- Header end -->
    </div>
    <div id="body">
        <!-- Body start -->

        <!-- Body end -->
    </div>
    <div id="footer">
        <!-- Footer start -->
footer
        <!-- Footer end -->
    </div>
</div>


</body>
</html>
于 2012-05-18T00:46:36.673 に答える