残りの画面スペースの高さを div で埋めます。
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
コンテンツを画面全体の高さいっぱいに表示したい Web アプリケーションに取り組んでいます。
このページには、ロゴとアカウント情報を含むヘッダーがあります。これは任意の高さでよい。コンテンツ div をページの残りの部分を最後まで埋めたいと考えています。
ヘッダーがあります div そして内容 div. 。現時点では、次のようなレイアウトにテーブルを使用しています。
CSSとHTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>ページの高さ全体が埋まるため、スクロールする必要はありません。
コンテンツ div 内のすべてについては、設定 top: 0; ヘッダーのすぐ下に配置されます。場合によっては、コンテンツが高さが 100% に設定された実際のテーブルになることがあります。パッティング header 内部 content これでは機能しません。
を使用せずに同じ効果を達成する方法はありますか? table?
アップデート：
コンテンツ内の要素 div 高さもパーセンテージに設定されます。つまり、内部では100％の何かが div 底まで埋めていきます。2 つの要素も 50% になります。
更新 2:
たとえば、ヘッダーが画面の高さの 20% を占める場合、テーブルはその内側の 50% に指定されます。 #content 画面スペースの 40% を占有します。今のところ、うまくいくのは全体をテーブルで囲むことだけです。
解決
2015 年の更新:フレックスボックスアプローチ
簡単に言及した他の2つの回答があります フレックスボックス;ただし、それは 2 年以上前のことであり、例は示されていません。フレックスボックスの仕様は確実に決まりました。
注記：CSS フレキシブル ボックス レイアウト仕様は推奨候補段階にありますが、すべてのブラウザーが実装しているわけではありません。WebKit 実装には、接頭辞として -webkit- を付ける必要があります。Internet Explorer は、-ms- という接頭辞が付いた古いバージョンの仕様を実装しています。Opera 12.10 は、プレフィックスのない最新バージョンの仕様を実装しています。最新の互換性ステータスについては、各プロパティの互換性表を参照してください。
(から抜粋 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
すべての主要なブラウザと IE11 以降は Flexbox をサポートしています。IE 10 以前の場合は、FlexieJS シムを使用できます。
現在のサポートを確認するには、ここでも確認できます。http://caniuse.com/#feat=flexbox
実例
フレックスボックスを使用すると、固定ディメンション、コンテンツ サイズのディメンション、または残りのスペースのディメンションを持つ行または列を簡単に切り替えることができます。私の例では、（OPの質問に従って）ヘッダーをコンテンツにスナップするように設定し、固定高領域を追加する方法を示すフッターを追加して、残りのスペースを埋めるようにコンテンツ領域を設定しました。
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>上記の CSS では、 フレックス プロパティの略記 フレックスグロー, フレックスシュリンク, 、 そして フレックスベース プロパティを使用して、フレックス項目の柔軟性を確立します。モジラには、 フレキシブル ボックス モデルへの優れた入門書.
他のヒント
CSS でこれを行うための、ブラウザをまたいだ確実な方法は実際にはありません。レイアウトが複雑であると仮定すると、JavaScript を使用して要素の高さを設定する必要があります。あなたがしなければならないことの本質は次のとおりです。
Element Height = Viewport height - element.offset.top - desired bottom margin
この値を取得して要素の高さを設定できたら、サイズ変更関数を起動できるように、ウィンドウの onload と onresize の両方にイベント ハンドラーをアタッチする必要があります。
また、コンテンツがビューポートよりも大きい可能性があると仮定すると、スクロールするように overflow-y を設定する必要があります。
元の投稿は 3 年以上前です。おそらく、私と同じようにこの投稿に来る人の多くは、アプリのようなレイアウト ソリューション、つまり、何らかの方法で固定されたヘッダー、フッター、および残りの画面を占めるフルハイトのコンテンツを探していると思います。その場合は、この投稿が役立つ可能性があります。IE7 以降などで動作します。
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easyer/
その投稿の一部を以下に示します。
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>マークアップでテーブルを使用する代わりに、CSS テーブルを使用することもできます。
マークアップ
<body>
<div>hello </div>
<div>there</div>
</body>
(関連) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
この方法には次のような利点があります。
1) マークアップの削減
2) マークアップは表形式のデータではないため、表よりもセマンティックです。
3) ブラウザのサポートは次のとおりです。 とても良い:IE8+、すべての最新のブラウザーおよびモバイル デバイス (使ってもいいですか)
完全を期すために、CSS プロパティと同等の Html 要素を以下に示します。 CSSテーブルモデル
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
CSS のみのアプローチ (高さが既知/固定の場合)
中央の要素をページ全体に垂直に広げたい場合は、次のように使用できます。 calc() CSS3で導入されたものです。
あると仮定します 固定高さ header そして footer 要素と私たちが欲しいのは section 利用可能な垂直高さ全体を取得するタグ...
想定されるマークアップ
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
したがって、CSSは次のようにする必要があります
html, body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}
ここでやっていることは、要素の高さを合計し、から差し引くことです。 100% を使用して calc() 関数。
必ず使用してください height: 100%; 親要素の場合。
使用済み：height: calc(100vh - 110px);
コード：
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>単純に使ってみてはどうでしょうか vh を表します view height で CSS...
見てください コードスニペット 以下を作成して実行します。
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>また、私があなたのために作成した以下の画像もご覧ください。
CSS3の簡単な方法
height: calc(100% - 10px); // 10px is height of your first div...
最近の主要なブラウザはすべてこれをサポートしているため、ビンテージ ブラウザをサポートする必要がない場合はそのままお使いください。
それは純粋に行うことができます CSS を使用して vh:
#page
{
display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent
{
float:left; width:100%; display:block;
}
#content
{
float:left; width:100%; height:100%; display:block; overflow:scroll;
}
そしてその HTML
<div id="page">
<div id="tdcontent">
</div>
<div id="content">
</div>
</div>
確認したところ、すべての主要なブラウザで動作します。 Chrome, IE, 、 そして FireFox
フレックスボックスを使用した簡単な解決策:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>コンテンツが高すぎる場合に下部の div をスクロールする必要がある場合、投稿された解決策はどれも機能しません。その場合に役立つ解決策は次のとおりです。
HTML:
<div class="table container">
<div class="table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
私もこれに対する答えを探していました。幸運にも IE8 以降をターゲットにできる場合は、次のように使用できます。 display:table および関連する値を使用して、div を含むブロックレベルの要素を含むテーブルのレンダリング ルールを取得します。
さらに幸運で、ユーザーが最上位のブラウザーを使用している場合 (たとえば、これが、私の最新プロジェクトのように、あなたが管理するコンピューター上のイントラネット アプリである場合)、新しい 柔軟なボックスレイアウト CSS3で！
私にとってうまくいったのは（別の div 内に div があり、他のすべての状況でそうだと思います）、下部のパディングを 100% に設定することです。つまり、これを css / スタイルシートに追加します。
padding-bottom: 100%;
免責事項:受け入れられた回答は解決策のアイデアを示していますが、不必要なラッパーとCSSルールで少し肥大化していることがわかります。以下は、CSS ルールがほとんどないソリューションです。
HTML5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
上記のソリューションは使用します ビューポートユニット そして フレックスボックス, したがって、IE10 の古い構文を使用する場合は、IE10+ になります。
遊べるコードペン: コードペンへのリンク
または、コンテンツが溢れた場合にメイン コンテナをスクロール可能にする必要がある場合は、次のようにします。 コードペンへのリンク
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
すべてのまともなブラウザでは、「ヘッダー」 div を兄弟としてコンテンツの前に置くことができ、同じ CSS が機能します。ただし、IE7 では浮動小数点数が 100% の場合、高さが正しく解釈されないため、上記のようにヘッダーをコンテンツ内に含める必要があります。オーバーフロー:auto を指定すると、IE では 2 つのスクロール バーが表示されます (常にビューポート スクロールバーが表示されますが、無効になります)。auto を指定しないと、コンテンツがオーバーフローするとクリップされてしまいます。
今ではたくさんの答えがありますが、私は次のことを見つけました height: 100vh; 利用可能な垂直方向のスペース全体を埋める必要がある div 要素を処理します。
このようにすると、表示や位置をいじる必要がなくなります。これは、Bootstrap を使用してサイドバーとメインがあるダッシュボードを作成するときに便利でした。背景色を適用できるように、メインを縦方向のスペース全体に引き伸ばして埋める必要がありました。
div {
height: 100vh;
}
IE9以降をサポート: クリックしてリンクを表示します
古いブラウザ (つまり、MSIE 9 以前) をサポートしていないことに対処できる場合は、次のようにすることができます。 フレキシブルボックスレイアウトモジュール これはすでに W3C CR です。このモジュールでは、コンテンツの並べ替えなど、他の優れたトリックも使用できます。
残念ながら、MSIE 9 以下ではこれがサポートされていないため、Firefox 以外のすべてのブラウザの CSS プロパティにベンダー プレフィックスを使用する必要があります。他のベンダーもすぐにこのプレフィックスを削除することを願っています。
別の選択肢としては、 CSS グリッド レイアウト しかし、ブラウザの安定バージョンからのサポートはさらに少なくなります。実際には、MSIE 10 のみがこれをサポートしています。
しばらくこれと格闘しましたが、最終的には次のようになりました。
コンテンツ DIV を親と同じ高さにするのは簡単ですが、親の高さからヘッダーの高さを引いた高さにするのは明らかに難しいため、コンテンツ DIV を全高にし、絶対に左上隅に配置してからパディングを定義することにしました。ヘッダーの高さを持つ上部用。このようにして、コンテンツがヘッダーの下にきちんと表示され、残りのスペース全体が埋められます。
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
なぜこのままではいけないのでしょうか？
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
html と body (この順序) に高さを与えてから、要素に高さを与えるだけですか?
私にとってはうまくいきます
style="height:100vh"
私の問題を解決してくれました。私の場合、これを必要なdivに適用しました
を定義するだけです body と display:grid そしてその grid-template-rows を使用して auto そしてその fr 値プロパティ。
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>実際に使えます display: table 領域を 2 つの要素 (ヘッダーとコンテンツ) に分割します。ヘッダーの高さは変えることができ、コンテンツは残りのスペースを埋めます。これはページ全体で機能するだけでなく、その領域が単に で配置された別の要素のコンテンツである場合にも機能します。 position に設定 relative, absolute または fixed. 。親要素の高さがゼロ以外である限り機能します。
このフィドルを参照してください そして以下のコードも:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
ヴィンセント、新しい要件を使用してもう一度答えます。長すぎても内容が隠れても問題ないので、ヘッダーをフローティングにする必要はありません。htmlタグとbodyタグにoverflow hiddenを入れて設定するだけです #content 高さを 100% にします。コンテンツは常にヘッダーの高さだけビューポートよりも長くなりますが、非表示になり、スクロールバーが表示されることはありません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
これを試して
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
私にとってそれは単なる設計上の問題だったので、非常に簡単な解決策を見つけました。ページの残りの部分が赤いフッターの下で白くならないようにしたかったのです。そこで、ページの背景色を赤に設定しました。そしてコンテンツの背景色を白にします。コンテンツの高さを例に設定すると、20em または 50% のほぼ空のページでは、ページ全体が赤くなることはありません。
モバイルアプリの場合はVHとVWのみを使用します
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
私も同じ問題を抱えていましたが、上記のフレックスボックスを使用して解決策を機能させることができませんでした。そこで、以下を含む独自のテンプレートを作成しました。
- 固定サイズの要素を含むヘッダー
- フッター
- 残りの高さを占めるスクロールバーを備えたサイドバー
- コンテンツ
フレックスボックスを使用しましたが、より単純な方法で、プロパティのみを使用しました 画面：フレックス そして フレックス方向:行|列:
私は angular を使用しており、コンポーネントのサイズを親要素の 100% にしたいと考えています。
重要なのは、すべての親のサイズを制限するために、すべての親のサイズを (パーセント単位で) 設定することです。次の例では、myapp の高さはビューポートの 100% になります。
ヘッダーとフッターが 5% であるため、メイン コンポーネントはビューポートの 90% を占めます。
ここにテンプレートを投稿しました: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
HTML:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
氏のアイデアをスピンオフしたもの。エイリアン...
これは、CSS3 対応ブラウザ向けの一般的なフレックス ボックスよりもクリーンなソリューションのように思えます。
コンテンツブロックに対して calc() で min-height (高さの代わりに) を使用するだけです。
calc() は 100% から始まり、ヘッダーとフッターの高さを減算します (パディング値を含める必要があります)。
「height」の代わりに「min-height」を使用すると、JavaScript でレンダリングされたコンテンツや Angular2 などの JS フレームワークで動作できるため、特に便利です。そうしないと、JavaScript でレンダリングされたコンテンツが表示された後、計算によりフッターがページの下部にプッシュされません。
以下は、高さ 50 ピクセル、パディングの両方に 20 ピクセルを使用したヘッダーとフッターの簡単な例です。
HTML:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
CSS:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
もちろん、計算は簡略化できますが、アイデアはわかります...
JavaScript を使用すると、残りの画面スペースを動的に計算できます。
以下のライブラリのような CSS-IN-JS テクノロジーを使用できます。
それ JavaScript を使用する以外の方法ではうまくいきませんでした NICCAIが最初の回答で示唆したように。私はそのアプローチを使用して、 <div> Googleマップを使って。
これを行う方法の完全な例は次のとおりです (Safari/FireFox/IE/iPhone/Andorid で動作します (回転で動作します))。
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
