2016-09-04 16 views
0

ヘッダーとフッターの要素の間に100%ラッパーがあるページを作成する必要があります。ラッパーは、テンプレートを追加する一般的なコンテンツビューです。ラッパー100%の高さを除いて、私はラッパーに100%の高さでも最初のセクションを持つ必要があります。ヘッダーとフッターの間の100%高さラッパー(最初のセクションは100%の高さに設定されています)

主な問題は、ラッパーの後にフッタを相対的に配置できないことです。それは真ん中のどこかにとどまります。たとえば、フィドルを参照してください。

HTML

<header ui-view="header"></header> <!--Fixed Height/Relative--> 
    <div id="wrapper" ui-view="wrapper"> <!--100% Height/Relative--> 
     <section></section> <!--100% Height/Relative--> 
     <section></section> <!--Auto Height Based On Content/Relative--> 
     <section></section> <!--Auto Height Based On Content/Relative--> 
    </div> 
<footer ui-view="footer"></footer> <!--Fixed Height/Relative--> 

CSS

body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    position: relative; 
} 
html{ 
    height: 100%; 
} 
div{ 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 
section:first-child{ 
    height: 100%; 
} 
section{ 
    position: relative; 
    display: block; 
    height: 400px; 
    width: 100px; 
    border: 1px solid black; 
} 
header{ 
    position: relative; 
    height: 100px; width: 100%; background: red; 
} 
footer{ 
    position: relative; 
    height: 100px; width: 100%; background: red; 
} 

JSFiddle

答えて

0

私はあなたのセクションの周りに持っているのdivはあなたにいくつかのトラブルを引き起こしているものであると信じています。下のスニペットをご覧ください。あなたの最初のセクションとそのdivにヘッダーだけを配置する場合、そのdivに100%の高さを置くことで、あなたが望むものを達成することができます。

そのdivがなければ、:first-child疑似セレクタは機能しません。これは、そのセクションがもはやその親の最初の子(ヘッダー)ではないためです。だから私はそれにIDを追加したので、私はCSSでそれを参照することができます。

これで、divは高さの100%、ヘッダーは固定高さ、section1はdivの残りの部分を100%充填しています。

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background:green; 
 
} 
 
html{ 
 
    height: 100%; 
 
} 
 
div{ 
 
    height: 100%; 
 
    width: 100%; 
 
    background: pink; 
 
} 
 

 
section { 
 
    display: block; 
 
    height: auto; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
section#section1 { 
 
    height: 100% !important; 
 
} 
 

 
header{ 
 
    height: 50px; width: 100%; background: red; 
 
} 
 
footer{ 
 
    height: 50px; width: 100%; background: blue; 
 
}
<div> 
 
<header></header> 
 
<section id='section1'>section1</section> 
 
</div> 
 
<section>section2</section> 
 
<section>section3</section> 
 
<footer></footer>

あなたはbodyに設定したheight:100%は、あなたのフッター要素がページの中央にあることが原因となっているものです。 「100%」は「ウィンドウの高さの100%」なので、注意してください。乾杯。

+0

私がボディから100%削除すると、私が言及した最初のコンテンツコンテナでそれを失います。基本的には、最初のセクションの高さを100%にし、残りをautoに設定する必要があります。 –

+0

OK、私は今、より良い理解があると思います。私は私の答えを改訂しました。上記のスニペットをチェックし、それがあなたの後にあるかどうかを確認してください。 –