0

私のシンプルなレイアウトには、ヘッダー、メインセクション、フッターが含まれています。フッターがページの一番下にプッシュされました。そして、メインセクションにヘッダーとフッターの間のすべてのスペースをとってもらいたいです。

これが私がしたことです：http：//jsfiddle.net/5d3m9/

HTML

<div class="wrap">
   <header>header</header>
   <div class="main">lorem2000 </div>
   <div class="clear"></div>
   <footer>@Copyright</footer>
</div>

CSS

html, body {
    height: 100%;
}

body {
    margin: 0;
}

header {
    height: 150px;
    background: orange;
}
.wrap {
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.main {
    background: #00eaea;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}
.clear {
    height: 50px;
}
footer {
    background: #dadada;
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

これを達成するための他の/より良い方法はありますか？（なしpadding-bottom: 32767px; margin-bottom: -32767px;）

4

1 に答える 1

2

次のスタイルをに適用します.main

.main {
    background: #00eaea;
    top: 150px;
    bottom: 50px;
    position:absolute;
    width: 100%;
}

http://jsfiddle.net/5d3m9/1/

于 2013-02-05T01:50:00.750 に答える