ヘッダーとフッターの要素の間に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;
}
私がボディから100%削除すると、私が言及した最初のコンテンツコンテナでそれを失います。基本的には、最初のセクションの高さを100%にし、残りをautoに設定する必要があります。 –
OK、私は今、より良い理解があると思います。私は私の答えを改訂しました。上記のスニペットをチェックし、それがあなたの後にあるかどうかを確認してください。 –