div
周囲の要素の上部とは異なる、通常の位置で上部にとどまる必要がある を定義する必要があります。
position:relative
top:0
周囲の要素のサイズまで高さが大きくなります。
position:absolute
bottom:0
両方を組み合わせる方法がわかりません。相対ボックスを使用するときは常に絶対底を失い、絶対ボックスを使用するときは常に相対上部を失います。
CSSでこれを行う方法を誰か助けてもらえますか?
次に例を示します。
<html>
<head>
</head>
<style type="text/css">
@media screen {
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#head {
background-color: gray;
}
#rel {
background-color: green;
position: relative;
top: 0;
bottom: 0;
float: left;
}
#abs {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
float: left;
}
}
</style>
<body>
<div id="head">
<h1>Head</h1>
</div>
<div id="abs">
<h2>absolute</h2>
</div>
<div id="rel">
<h2>relative</h2>
</div>
</body>
</html>
「相対」はまったく成長せず、「絶対」は成長しすぎます。