ヘッダーとフッターの間の100％高さラッパー（最初のセクションは100％の高さに設定されています）

Question

ヘッダーとフッターの要素の間に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

Answer 1

私はあなたのセクションの周りに持っているの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％」なので、注意してください。乾杯。