DIV - 力の高さ100％=/=ページの高さですか？

Question

私は設定しようとしているデザインで大きな問題になっています。ここに参考用のウェブサイトがあります。

http://throwbackhero.com/index1.php

問題は、私は高さに身体を設定することである：100％。スタイルシートと#wrapper divでも同様です。高さは現在のページの高さから外れ、オーバーフローを引き起こす可能性のある他のdivがあることを考慮しません。

ブラウザの縦のサイズが変更されても空白のページがブラウザのサイズになるようにするには、コンテンツ/ラッパーdivを縮小して調整します。

これはできますか？

EDITは

わかりましたので、明らかに私の元の質問は非常に混乱しました。ここに写真があります。

ので、PIC 1（左）に問題があります。高さ100％;ラッパーとコンテンツ部門では、その悪い少年を作り出しています。私はそれが白い/灰色の領域がブラウザのサイズに応じて拡大/縮小する画像のように見えます。

Answer 1

min-height:100%を使用して問題を解決してください。 （私はあなたの質問を完全に理解していませんでした;））

Answer 2

wrapper要素にoverflow:autoを追加してください。

Answer 3

本文を指定すると、&メインDIV height 100%となります。このように書きます：

body,html{height:100%;} 

.parent{ 
    min-height:100%; 
    width:400px; 
    margin:0 auto; 
    background:red; 
} 

チェックこのhttp://jsfiddle.net/3VUGt/

Answer 4

この問題の完全なCSSのソリューションはありません。このCSSの「問題」は長年にわたり知られていました。 CSSは長年にわたり機能が向上して以来、今は完全なCSSソリューションがあると思っていました。しかし、悲しいかな、そうではありません。私は多くのことを試して、高いものと低いものを検索しましたが、問題は変わりません。

私の知る限り、サードパーティのライブラリを必要としない3つのソリューション、絶対配置、偽の列（2トーンの繰り返しの背景）、およびJSがあります。

魅力的な解決策は、偽の列とJSだけです。私はJSソリューションを好んでいます。なぜなら、CSSをより多く使うからです。 JSでは、後で列の幅や色を変更したい場合、背景イメージを再処理する必要はありません。これは、より適応性が高く、再利用可能なソリューションです。偽の列を作成するために私が見ることができる唯一の利点は、クライアントがJSを無効にするとレイアウトが壊れないことです。

JS溶液（ラッパーは必要ありません）：https://jsfiddle.net/Kain52/uec9cLe4/

var side1 = document.getElementsByTagName('main')[0]; 
var side2 = document.getElementById('mainMenu'); 
var side1Height = side1.clientHeight; 
var side2Height = side2.clientHeight; 
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; } 
else { side1.style.height = side2Height + "px"; } 

JS溶液（ラッパーが必要）：https://jsfiddle.net/Kain52/7udh55zq/

var wrapperHeight = document.getElementById('innerWrapper').clientHeight; 
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px"; 
document.getElementById('mainMenu').style.height = wrapperHeight + "px"; 

説明：あなたはdivのラッパーを使用する場合は、あなたがそれを割り当てることができますラッパーの高さラッパーを使用しない場合は、最も短い辺の高さを最も長い辺の高さに設定するだけです。

height: 100vh; 

「VH：最も簡単な方法は、単にCSSを使用している

var contentHeight = document.getElementsByTagName('main')[0].clientHeight; 
document.getElementById('mainMenu').style.height = contentHeight + "px"; 

Answer 5

：あなたはサイドメニューバーが常にあなたのコンテンツよりも短くなることがわかっている場合は、唯一の2行のコードが必要'は、ブラウザウィンドウの垂直方向の高さを表します。 ブラウザーとモバイルデバイスのサイズ変更に対応します。

Answer 6

JavaScriptがページの1ミリ秒ごとに実行されても問題ありません。問題の白い部分の上のコンテンツは常に同じピクセルの高さになります。

bodyLeadingFill = // put the size taken up by everything above the white div, 
        // including margin, padding, border, etc 
function resizeElement(){ 
    document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here *//100) + "%"; 
} 
window.setTimeout(resizeElement, 0); 

これはもちろん、フォント、オペレーティングシステム、またはウィンドウのサイズに関係なく、ホワイトボックスの上のコンテンツは常に同じサイズになると想定しています。

私は実際に自分自身をテストしませんでしたが、コンセプトはうまくいくはずです。いくつかの情報をどこに置くべきかを言うコメントを探してください。