非常にシンプルなCSSの最小の高さマージンで100％の問題

divをmin-heightに設定する方法を教えてください：15％のマージントップがある場合は100％ですか？私が望むのは、divが画面の下部に（スクロールバーをトリガーせずに）接触することですが、コンテンツが大きすぎて収まらない場合は、スクロールバーをトリガーする画面の下限まで自動的に展開されます。ここアイブ氏は、これまでに得たものです：非常にシンプルなCSSの最小の高さマージンで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> 
<style type="text/css"> 
body, html{height:100%; margin:0;} 
body{background:#AAA} 
#main{position:relative; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;} 
</style> 
</head> 

<body> 
<div id="main"> 
try duplicating this content until it does not fit in the box 
</div> 
</body> 
</html>

出典

2012-01-15 cronoklee

'max-height'おそらく？ :) – techie007

可能な複製：http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin – Cyrille

はい私はこのスレッドを見たことがありますが、ソリューションを試してください - テキストはボックスからオーバーフローし、現代のブラウザではボックスは同じサイズのままです。 – cronoklee

にdiv要素を修正するために次のCSSを使用することができ、私は解決策を見つけた：身体上の新しいCSS3 box-sizingルールを使用して、それを設定しますパディングトップに：15px; #mainのマージントップを削除してください。これは上記のすべての新しいブラウザで正確に動作します。

出典

2012-01-16 13:25:00 cronoklee

あなたは下

#main{position:fixed; bottom : 0px; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}

出典

2012-01-15 20:07:58 udnisap

非常にシンプルなCSSの最小の高さマージンで100％の問題

答えて

関連する問題