3

私は次のウェブページを持っています。

<body>
<div id="everything">
<div id="top_header">TOP BAR WITH INFO. FIXED HEIGHT</div>
<div id="content">
<div id="header"><h1> MENU</h1></div>
<div id="body">CONTENT</div>
</div><!--end content-->
<div id="footer">DYNAMIC HEIGHT DEPENDING ON THE LINKS IN THE FOOTER</div>
</div><!--end everything-->
</body>

とスタイル： 

    <style type="text/css">
body {
    background-color: #FFFFFF;
    font: 13px arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
#everything {
    background-color: #FFFFFF;
    min-height: 100%;
    margin: auto;
    width: 100%;
}
#content {
    display: block;
    margin: auto;
    width: 1000px;

}
#header {
    padding-bottom: 25px;
    background-color:#666699;
    height:60px;
}
#body {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    padding-bottom: 23px;
    background-color:#CC3333;
    height:1500px;
}
#footer {
    display: inline-block;
    position: absolute;
    bottom:0px;
    width: 100%;
    background-color:#FF6600;
    height:70px;
}
#top_header {
    width:100%;
    background-color:#0066CC;
    height:30px;
}
h1{
    margin:0;
}
</style>

フッターの高さは動的であり、HTML構造を変更することはできず、CSSのみを変更できます。小さい画面でウェブページを表示し、「body」の高さがビューポートよりも大きい場合は問題ありませんが、大きい画面でWebページを表示し、「body」のサイズがビューポートよりも小さい場合、フッターは底に固執しないでください。また、「本体」のサイズが大きい場合（この例のように）、下部のフッターは押されません。フッターの高さや、すべてのコンテンツが含まれる「本体」の高さを知らなくても、フッターを常にビューポートの下部に貼り付けるのを手伝ってもらえますか？

ありがとう、ミハイ

4

3 に答える 3

0

フッターの相対位置を定義し、絶対位置を削除できます

#footer{
   position:relative;
}
于 2012-04-04T08:25:27.010 に答える
0

これは CSS2 では完全に可能というわけではありません。具体的には、フレキシブルな高さのフッターが、コンテンツを展開することによって正しく押し下げられます。可変の高さで画面の下部に貼り付けることができますが、特定の高さが事前にわからないため、それに応じてコンテンツのマージン/パディングボトムを設定することはできません。

ページの読み込み後に JavaScript でフッターの高さを測定し、それをコンテンツのパディング/マージン下部として適用することをお勧めします。これにより、直面している唯一の実際の問題を回避できます。

別のオプションは、ラッパーとディスプレイを使用してテーブルを活用することです: table-row/table-cell. ここで同様の質問に答えました: https://stackoverflow.com/a/9946474/759144

于 2012-04-04T08:35:02.387 に答える
-1

次のデモを確認してください。この解決策が問題の解決に役立つと思います。

body {
    background-color: #FFFFFF;
    font: 13px arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
#everything {
    background-color: #FFFFFF;
    min-height: 100%;
    margin: auto;
    width: 100%;
}
#content {
    display: block;
    margin: auto;
    width: 1000px;

}
#header {
    padding-bottom: 25px;
    background-color:#666699;
    height:60px;
}
#body {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    padding-bottom: 23px;
    background-color:#CC3333;
    height:1500px;
}
#footer {
    display: inline-block;
    position: sticky;
    bottom:0px;
    width: 100%;
    background-color:#FF6600;
    /* height:70px; */
    bottom: 0;
}
#top_header {
    width:100%;
    background-color:#0066CC;
    height:30px;
}
h1{
    margin:0;
}
<html>


<body>
<div id="everything">
<div id="top_header">TOP BAR WITH INFO. FIXED HEIGHT</div>
<div id="content">
<div id="header"><h1> MENU</h1></div>
<div id="body">CONTENT</div>
</div><!--end content-->
<div id="footer">DYNAMIC HEIGHT DEPENDING ON THE LINKS IN THE FOOTER</div>
</div><!--end everything-->
</body>



</html>

于 2019-02-12T06:00:30.443 に答える