19

ヘッダー、垂直方向の横幅 (ヘッダーとフッターを除く) の 100% に広がるメイン div、およびフッターを含むページをデザインしようとしています。この写真のように:

ここに画像の説明を入力

ヘッダーとメイン div を動作させることができます。このような：

    <div id="wrapper">

        <div class="header_div">HEADER</div>
        <div class="main_div">MAIN</div>
        <div class="footer_div">FOOTER</div>

    </div>

この CSS では:

html {
    height: 100%;
 }

 body {
    margin: 0;
    padding: 0;
    height: 100%;
 }

.header_div{

    height: 40px;
    width: 100%;
    background-color: #000000;

}

.main_div{

    margin-bottom:40px;
    margin-top:40px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color: red;
}


.footer_div{

    position: relative;
    height: 40px;
    width: 100%;
    background-color: blue;
}

したがって、メイン div は、ヘッダーを考慮して上から 40 ピクセルで開始し、フッターを考慮して下から 40 ピクセルで停止します。これはうまくいきますが、フッター div をメイン div の下に表示することはできません。現在の方法ではposition: relative、メイン div の上にフッターを配置しています。使用する場合position:absoluteは、メイン div の下に配置します。

CSSは私のものではないので、私はこれを間違っていると確信しています。

これに関するヘルプは素晴らしいでしょう。

ありがとう

4

3 に答える 3

31

CSS3フレックスボックスの使用:

/*QuickReset*/*{margin:0;box-sizing:border-box;}


body {                /* body - or any parent wrapper */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

于 2013-06-11T21:38:26.907 に答える
2

css calc() 関数を使用します。

この方法では、要素の位置を定義する必要はありません

ここにデモがあります

html:

<header>Header</header>
<main>Main</main>
<footer>Footer</footer>

CSS:

html, body { 
    height: 100%
}

body {
    color: #FFF;
    padding: 0;
    margin: 0;
}

header { 
    background-color: #000;
    height: 100px;    
}

main { 
    background-color: #AAA;
    height: calc(100% - 150px);    
}

footer { 
    background-color: #000;
    height: 50px;    
}
于 2015-07-13T19:13:36.643 に答える