css heightプロパティ

私はcssに次の問題があり、絶対的な高さの値を設定して解決する方法があるかどうか疑問に思っていました。次のように私が持っているコードは、私が100％に高さプロパティを設定しているcss heightプロパティ

<style type="text/css" media="screen"> 
html { height:100%; } 
body { background: black; height:100%; } 

#menud { 
position:absolute; 
padding:1em; 
height:300px; 
background-color:#eaeaea; 
width:184px; 
} 

#menue { 
position:absolute; 
margin-top:300px; 
padding:1em; 
height:900px; 
width:184px; 
background-color:red; 
} 

#data { 
position:absolute; 
margin-top:0px; 
margin-left: 184px; 
width:630px; 
height:600px; 
border-left:1px solid #dedede; 
border-right:1px solid #dedede; 
} 

#ad { 
position:absolute; 
padding:1em; 
margin-top:0px; 
margin-left:814px; 
width:186px; 
background-color:red; 
height:800px; 
} 

#content { 
width:1000px; 
background-color:white; 
height:100%; 
} 

#info { 
margin-top:0px; 
width:1000px; 
} 
</style> 

<html> 
<body> 

<div id='content'> 
<div id='info'> 

<div id='menua'>test</div> 
<div id='menub'>test</div> 
<div id='data'>test</div> 
<div id='ad'>test</div> 

</div> 
</div> 

</body> 
</html>

であるが、1つは、それが期待されるので、これはホワイトホールの背景をカバーしていません。これについての助けに感謝します。

Thanx。

出典

2012-01-12 Anonymous

高さは100％です。全体の背景をカバーするには、javascriptを使用する必要があります。ページロード時に、heightをウィンドウの高さに設定します。

あなたがこれを行うには、jQueryを使用することができます。その場合には

$("#content").css('height', $(window).height());

出典

2012-01-12 10:39:05

これを行うにはjQueryは必要ありませんし、プレーンなjavascriptで簡単に設定することもできます。 – Rob

はい。しかし、あなたはさまざまなブラウザを処理する必要があります。 jQueryは簡単にできました。 :) –

それについて多く考えることなく、私はブラウザがそれをどうやって行うのか分かりません。 – Rob

あなたは、全体の高さをカバーするために相対配置されたコンテナdivため、body { margin: 0; padding: 0; }のように、身体からパディングとマージンを削除する必要があります。

出典

2012-01-12 10:44:50 kontur

高さを100％に設定すると、現在のビューポートの高さの100％を意味します。ページがブラウザのビューポートよりも長い場合、divは短すぎます。高さを正しく計算するには、自動高さを使用します。バックオートへのコンテンツの高さ（height: 100%を除く）に設定し

：親のを計算する際に、広告の高さが尊重されるように、

#content { 
width:1000px; 
background-color:white; 
}

と広告からposition: absoluteを削除（またはposition: relativeと交換します）（ #content年代）高さ：

#ad { 
padding:1em; 
margin-top:0px; 
margin-left:814px; 
width:186px; 
background-color:red; 
height:800px; 
}

今、あなたのコンテンツは、あなたが期待する限りです。

出典

2012-01-12 10:54:08 Parzifal

css heightプロパティ

答えて

関連する問題