私は心配しています。外部マージンを100％拡張可能なコンテナdiv
内容が拡大する20ピクセルの余白を持つ100％幅、100％高さの容器が必要です。これはすべて可能ですか？
#container {
position:absolute;
top:0;
bottom:0px;
left:0;
right:0;
margin:20px;
}
しかし、それは文句を言わないコンテンツと高さに拡大：私が得た最も近いが、この方法でいました。
誰でもこのための神聖なテクニックを知っていますか？
を試してみてください ：
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%; padding: 0; /* padding 0 is for jsfiddle */
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin-left: 20px;
margin-right: 20px;
margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */
background-color: #ccc;
}
.spacer.edge {
background-color: white; /* same as body background */
}
.spacer {
height: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="spacer edge"></div>
<!-- content here -->
<div class="spacer"></div>
</div>
<div class="spacer edge"></div>
</body>
</html>
はと遊ぶのフィドルます：http://jsfiddle.net/dTyTW/
marginを削除し、それぞれの位置に20pxを付けます。
bottomも削除してください。
追加padding-bottom:20px;
#container {
position:absolute;
top:20px;
left:20px;
right:20px;
padding-bottom:20px;
}
http://jsfiddle.net/jasongennaro/w7dQP/3/
EDIT
あなたには、いくつかのjQueryを使用するのではなくされていない場合は、この
var h = $(document).height();
var h2 = $('#container').height();
if(h2 < h){
$('#container').height(h);
}
このensuを行うことができますブラウザのビューポートよりも小さい場合は、それに合わせて拡大されます。
テキストが大きくなると、スタイルがそれを処理します。
それは100％の高さではない – Esben
あなたは正しい、@エースベン。これは、コンテンツが既に画面の高さの100％以上である場合にのみ機能します。 –
内容が画面の高さの100％より小さい場合、上記の私の編集を参照してください。 –
あなたがコンテンツをdiv要素を展開したい私は、あなたがポジションを設定する必要があります：相対して、下パディング底部に向かってスティックにするためにも設定する必要があります。
#container {
position:relative;
top:20px;
bottom:20px;
left:20px;
right:20px;
padding-bottom: 80%;
border:1px solid red;
}
値は、要件ごとに調整することができます。私は単一の要素で行うことはできませんかなり確信していますが、3つのスペーサーdiv要素を有する気にしない場合は、このソリューションは、すべてのブラウザで動作here
これはどちらも動作しません。空であっても、ウィンドウを越えて展開されます。どちらが意図ではないか:) – Esben
<html>
<style>
body
{
margin:0px;
}
div
{
position: absolute;
padding: 20px;
}
img
{
position: relative;
width: 100%;
}
</style>
<body>
<div>
<img src="http://manual.businesstool.dk/screen.jpg" />
</div>
</body>
</html>
ボックスモデルを見て...パディングプロパティを使用します。
私はあなたが求めているものを想像することはできません。もっと説明できますか？ – thirtydot
はい。私は、高さ100％、幅100％のdivが必要ですが、スペースは20pxです。このように：http://manual.businesstool.dk/screen.jpg 私に教えてください。 ：P – Esben