8

私は非常に単純な構造を持っています:

<div class="parent">
    <h1>Element taking space</h1>
    <div class="stretch">
        Not much content, but needs to be stretched to the end.
    </div>
</div>

親には高さが設定されており、コンテンツがどれほど少なくても、その高さまで伸ばしdivたいと考えています。コンテンツを押し下げる他の要素を追加するまで、div.stretchを使用するとうまくいきます。height: 100%

height: 100%指定は、要素が親要素とまったく同じ絶対/計算された高さを持つ必要があり、他のすべての要素が計算された後の残りの高さではないことを意味すると思います。

設定するoverflow: hiddenと明らかにあふれているコンテンツが隠されますが、それは私にとって選択肢ではありません。

純粋なCSSでそれを達成する方法はありますか?

Demo of my problem

4

5 に答える 5

3

h1 要素をフロートできます。高さに関係なく機能し、ストレッチ要素のコンテンツはその下にプッシュされます。しかし、これがあなたが探しているものかどうかは完全にはわかりません。

EDIT: I'm not certain what kind of browser support you're looking for, but you could also set the display to table on .parent and then have .stretch inherit the height. Then you can nest the column divs inside of .stretch and float them.

Updated: http://jsbin.com/oluyin/2/edit

HTML

<div class="parent">
    <h1>Element taking space</h1>
    <div class="stretch">
        <div class="col">Not much content, but needs to be stretched to the end.</div>
        <div class="col">Not much content, but needs to be stretched to the end.</div>
    </div>
</div>

CSS

.parent {
    display: table;
}

.stretch {
    height: inherit;
}

.col {
    float: left;
    width: 50%;
}
于 2013-04-10T16:43:04.117 に答える
1

おそらく、display:table プロパティを使用するとニーズに合うでしょうか?

編集:この回答は実際には thgaskell のもののように見えますが、フロートを使用する代わりに、テーブル行とテーブルセルの表示を使用しており、探しているものを達成しているようです。

ここに jsfiddle があります: http://jsbin.com/ebojok/17/edit

.parent {

  background-color: #eee;
  border: 1px solid black;
  width: 600px;
  height: 600px;
  display:table;

}

h1{
  display:table-row;
  width:100%;
}


.stretch{

  vertical-align:top;
  display:table-cell;
  height:100%;
  background-color: #ddd;

}
于 2013-04-10T18:17:00.043 に答える
-1

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <h1>Element taking space</h1>
    <div class="stretch">Not much content, but needs to be stretched to the end.</div>
  </div>
</body>
</html>

CSS

.parent {

  background-color: #eee;
  border: 1px solid black;
  width: 300px;
  height: 600px;
  position:relative;

}

.stretch {

  background-color: #ddd;
  height: 100%;
  position: absolute;  
  top: 0;
}

http://jsbin.com/amesox/1/edit

h1これは、要素が上に移動するときに要素をカバーします.stretched。z-index: 1;要素に を使用することでこれを回避できますがh1、要素にテキストが必要な場合は使用しないことをお勧めします.stretched。

「フック」する何かをposition:relative;与えるには、親 divが必要です。position: absolute絶対配置された要素は、他の要素を無視し、z-index がそれより高いか、それらがその子でない限り、それらの上に配置されます。

于 2013-04-10T16:43:17.140 に答える