2

コンテンツが足りない場合、フッターが上に移動して下にくっつかないサイトがあります。フッターが下部に残り、次のように表示されないようにするために、フッターとヘッダーの間のdivを使用可能なスペースまで伸ばす方法を理解しようとしています。

ここに画像の説明を入力してください

高さを100％に設定しようとしましたが、機能しません。

HTML：

<div id="wrapper">

    <div id="body_div">
        <section id="main_section">
        </section>
        <aside id="sidebar">                    
        </aside>
    </div>
    <footer id="footer">
        &copy; Copyright  by SimKessy
    </footer>
</div>

CSS：

body{
    width: 100%; /*always specify this when using flexBox*/ 
    height:100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    text-align:center;
    -webkit-box-pack:center; /*way of centering the website*/
    -moz-box-pack:center;
    box-pack:center;
    background:url('images/bg/bg9.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#wrapper{
    max-width: 850px;
    display: -moz-box;
    display: -webkit-box; /*means this is a box with children inside*/
    -moz-box-orient:vertical;
    -moz-box-flex:1;
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
    background: rgba(0,0,0,0.7);
    height:100%;    
    z-index: 1;
}
#body_div{
    display: -webkit-box;
    -webkit-box-orient:horizontal;
    display: -moz-box;
    -moz-box-orient:horizontal;
    color:#000000;
    margin-top: 190px;
    height: 100%;
}
#main_section{
   /* border:1px solid blue;*/
    -webkit-box-flex: 1; 
    -moz-box-flex:1;
    margin: 20px;
    padding: 0px;
    height:100%;
    width: 100%;
}

これは私のサイトですhttp://www3.carleton.ca/clubs/sissa/html5/video.html サイドメニューを使用してワイドスクリーンモードに移行すると、私が何を意味するかがわかります。

4

2 に答える 2

10

あなたは実際に答えに本当に近いです。#wrapperただし、単にdivのみを100％の高さに設定することはできません。次の行を含める必要があります。

html, body, #wrapper {
width:100%; 
height:100%;
}

現在、問題は、wrapperdivに100％が何であるかについての手がかりがないことです。htmlとbody要素に由来する、定義された高さの親が必要です。

スティッキーフッターは、アブソリュートポジショニングとセットを使用するだけbottom:0px;です。これにはサードパーティのAPIを使用しないでください。使用position:absoluteは途方もなく簡単な修正であり、サードパーティのAPIを追加するとサイトの速度が低下します。

于 2013-03-16T20:32:04.513 に答える
2

jqueryを使用して、必要な高さを計算できます。

  • bodyのマージンを0に設定します
  • 次に、次のスクリプトを使用します。
<script type="text/javascript">
    $(document).ready(function(){
        var clientHeight = document.documentElement.clientHeight;
        $('#wrapperHeight').height(clientHeight+'px');
        var bodyHeight = clientHeight - $('#body_div').css("marginTop").replace('px', '') - $('#footer').outerHeight(true);
        $('#body_div').height(bodyHeight+'px');
    });
</script>
于 2013-03-16T23:22:59.927 に答える