左側にパネルがあるページを作成しようとしています。パネルには、ヘッダー、コンテンツ領域、およびフッターがあります。メインのパネルラッパーdivは、ページの高さの100％とします。ヘッダーとフッターの高さが何であれ、コンテナの100％を差し引いたものにしたいのですが、ヘッダーとフッターはテキストとパディングに十分な大きさにしたいので、ヘッダーとフッターには指定された高さがありません。私はどのように、または私はCSSでこれを行うことができるか分からない。誰でもここで何をすべきか知っていますか？ありがとう。100％の高さでCSSの問題が発生しました
htmlページ& CSSはここにある - https://gist.github.com/1641918
ディスプレイを表として使用してこれを行うことができます。内容 '行'の高さを100％に設定し、他の部分は0％に設定します。テーブルは、指定された高さに可能な限り近づけて行を試行します。
html, body { height: 100%; width: 100%; }
div#container { display: table; height: 100%; width: 100%;}
div#container > div { display: table-row; }
div#container > div > div { display: table-cell; border: 1px solid gray; }
div#header { height: 0%; }
div#content {height: 100%; background: lightgray; }
div#footer { height: 0%; }
ありがとうございました。それは素晴らしいことです！ –
私はいくつかの機会にこれを扱っています。私の経験から、1つか2つの具体的なケースでただCSSを使用して可能なにあります。それ以外の場合は、JavascriptとCSSでタグ付けする必要があります。要素を100％の高さに設定するには、その親要素の高さを切り捨てる必要があるからです。要素がどれくらい深く入れ子になっているか、そしてそれが前にあるかもしれないし、どんな兄弟になっているかによって、CSSだけで可能かどうかが決まります。
conentコンテナdivをブラウザのビューポートの100％にする1つの方法は、次のスタイルを使用する方法です。
html {
height:100%;
}
body {
height:100%;
}
#container {
min-height:100%;
max-height:100%;
}
<html>
<body>
<div id="container">
...
</div>
</body>
</html>
レイアウトによっては、簡単に扱われないことがあります。
ここで私の非常に関連した質問を参照してください：http://stackoverflow.com/questions/7391661/set-html-element-to-have-100-height-on-page-with-をヘッダー –