回答:
これは、divを動的背景のコンテナーとして使用するときに最終的に思いついたソリューションです。
z-indexバックグラウンド以外の使用のためにを削除します。leftかright、列全体の高さを指定します。topかbottom、全幅の行の場合。編集1：以下のCSSは、FFおよびChromeで正しく表示されなかったため、編集されました。position:relativeHTML上に移動し、本文をheight:100%ではなくに設定しましたmin-height:100%。
編集2： CSSにコメントを追加しました。上記の手順をいくつか追加しました。
CSS：
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}HTML：
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>どうして？
html{min-height:100%;position:relative;}これがないと、cloud-container DIVはHTMLのレイアウトコンテキストから削除されます。position: relativeDIVがHTMLボックスbottom:0の下部を参照するように描画されるときに、DIVがHTMLボックス内に留まるようにします。height:100%ビューポートではなくHTMLタグの高さを参照するようになったので、cloud-container でも使用できます。
htmlただし、要素にはmin-height（高さだけでなく）を使用する必要があることに気付きました。何故ですか？
heightとは、「あなたはこの背が高いです。それ以上でもそれ以下でもない。」つまり、ビューポートの高さになります。少なくともビューポートと同じかそれよりも高くする必要があります。min-heightこれはうまくやります。
<html>への配置とビューポートへの配置が2つの別個のものであることは決してありませんでした。ありがとうございました！
HTML5では、最も簡単な方法は単に実行することですheight: 100vh。「vh」は、ブラウザウィンドウのビューポートの高さを表します。ブラウザおよびモバイルデバイスのサイズ変更に対応します。
vw。
私にも同様の問題があり、解決策はこれを行うことでした：
#cloud-container{
position:absolute;
top:0;
bottom:0;
}高さがページの高さの100％のページ中心のdivが必要だったので、私のトータルソリューションは次のとおりです。
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}親要素（または単に「本体」）に position: relative;
cloud-containerですか？
テーブルを使用するのは簡単です：
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>DIVが導入されたとき、人々はテーブルをとても恐れていたので、貧しいDIVは比喩的なハンマーになりました。
絶対位置を使用します。これは、手動でレイアウトしたり、フローティングダイアログを表示したりする必要がある位置アブソリュートの一般的な使用方法ではないことに注意してください。ウィンドウまたはコンテンツのサイズを変更すると、これは自動的に拡大します。これには標準モードが必要ですが、IE6以降で動作すると思います。
idが 'thecontent'のdivをコンテンツで置き換えてください（指定された高さは説明のためにあり、実際のコンテンツの高さを指定する必要はありません）。
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>これが機能する方法は、外側のdivがナビゲーションバーの参照ポイントとして機能することです。外側のdivは、「content」divのコンテンツによって引き伸ばされます。ナビゲーションバーは、絶対配置を使用して、親の高さまで伸びます。水平方向の配置では、コンテンツdivをナビゲーションバーと同じ幅だけオフセットします。
CSS3フレックスボックスモデルを使用すると、これははるかに簡単になりますが、IEではまだ使用できず、独自の癖があります。
より最近のブラウザをターゲットにしている場合、生活は非常に簡単です。試してください：
.elem{
height: 100vh;
}ページの50％で必要な場合は、100を50に置き換えます。
モーダルポップアップを表示する前にWebページ全体をカバーしたいと思います。CSSとJavascriptを使用して多くの方法を試しましたが、次の解決策を見つけるまで、どれも役に立ちません。それは私のために働きます、それがあなたにも役立つことを望みます。
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>幸運を ;-）
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>シンプルで、テーブルのdivにラップするだけです...
HTML：
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>CSS：
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>