+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+
上記の(1)の内容は、動的に生成されるページで増減する可能性があるため不明です。上記の2番目のdiv(2)は、残りのスペースを埋める必要があります。
これが私のhtmlの例です
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>
css ...
#full{width: 300px; background-color: red;}
#someid{height: 100%;}
または、この方法は間違っていますか?どうすればいいですか?私デモを見て、間違いを見せてください。
Div(#header
以下)を追加して、1のコンテンツをラップする場合、これを行うことができます。
#header
をフロートすると、#someid
からのコンテンツがその周りを流れます。
次に、#header
の幅を100%に設定します。これにより、含まれるdivの幅[#full
]に合わせて拡張されます。これにより、#someid
のすべてのコンテンツが#header
の下に効果的にプッシュされます。これは、側面の周りに流れる余地がないためです。
最後に、#someid
の高さを100%に設定します。これにより、#full
と同じ高さになります。
HTML
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
CSS
html, body, #full, #someid {
height: 100%;
}
#header {
float: left;
width: 100%;
}
更新
flexboxは、今日の最新のブラウザーで十分にサポートされていることに言及する価値があると思います。 CSSは、#full
がflexコンテナになるように変更でき、#someid
はflexを0
より大きい値に設定する必要があります。
html, body, #full {
height: 100%;
}
#full {
display: flex;
flex-direction: column;
}
#someid {
flex-grow: 1;
}
ページでdiv
の高さを100%にするには、divの上の階層の各オブジェクトも100%に設定する必要があります。例えば:
html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }
私はあなたの質問を完全に理解することはできませんが、これがあなたの言っていることだと思います。
これは私が働いている例です:
<html style="height:100%">
<body style="height:100%">
<div style="height:100%; width: 300px;">
<div style="height:100%; background:blue;">
</div>
</div>
</body>
</html>
Style
は、私が外部化していないCSSの単なる置き換えです。
これはテーブルを使用して実行できます。
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="0%"><td>
<div id="full">
<!--contents of 1 -->
</div>
</td></tr>
<tr><td>
<div id="someid">
<!--contents of 2 -->
</div>
</td></tr>
</table>
次に、cssを適用して、someidが残りのスペースを埋めるようにします。
#someid {
height: 100%;
}
今、私は群衆から怒った叫び声を聞くことができます。聞いてください。
コンテナdivをページの全高にする以外に何も達成しない承認済みの回答とは異なり、このソリューションでは、div#2が質問で要求された残りのスペースを埋めます。 2番目のdivに割り当てられた全高を埋める必要がある場合、現在これが唯一の方法です。
もちろん、私が間違っていることを証明してください! CSSは常に優れています。
html,
body {
height: 100%;
}
.parent {
display: flex;
flex-flow:column;
height: 100%;
background: white;
}
.child-top {
flex: 0 1 auto;
background: pink;
}
.child-bottom {
flex: 1 1 auto;
background: green;
}
<div class="parent">
<div class="child-top">
This child has just a bit of content
</div>
<div class="child-bottom">
And this one fills the rest
</div>
</div>
私はこれが遅いエントリであることを知っていますが、2016年でさえ、フレックスのIEサポートの完全な欠如に驚いています(現在11がそれをサポートする唯一のものであり、その主にバグがあります http ://caniuse.com/#feat=flexbox )これはビジネスの観点からすれば素晴らしいことではありません!だから私はIEがシャットダウンされるまで最良の解決策であり、最もブラウザに優しい解決策は確かにJS/Jqueryのものでなければならないと思う?
ほとんどのサイトはすでにJqueryを使用しており、非常に単純な例(私のコードの場合)は次のとおりです。
$('#auto_height_item').height($(window).height() - $('#header').height());
あなたは明らかにウィンドウとヘッダーを置き換えて、基本的な数学に仕事をさせることができます。個人的には、まだflexについて納得していない...
短すぎるページにこれを追加しました。
html:
<section id="secondary-foot"></section>
css:
section#secondary-foot {
height: 100%;
background-color: #000000;
position: fixed;
width: 100%;
}
Div(fullおよびsomeid)の両方を含むdivを作成し、そのdivの高さを次のように設定します。
高さ:100vh;
含まれているdiv(fullおよびsomeid)の高さを「auto」に設定する必要があります。それで全部です。
これは古い質問ですが、最近ではCCSグリッドという非常に簡単なフォームがありますので、divを例に挙げてみましょう。
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
次に、CSSコード:
.full{
width:/*the width you need*/;
height:/*the height you need*/;
display:grid;
grid-template-rows: minmax(100px,auto) 1fr;
}
それだけです。2番目の行であるscilicetとsomeideは、プロパティ1frのために残りの高さを取ります。最初のdivは、最小100pxで必要な最大値を持ちます。
プログラマーの生活を楽にするために、CSSは大きく進歩したと言わなければなりません。