0

親( height)が. _divclass="item"class="site-section"min-height: 100%

これは私のHTMLです：

<div class="spacer"></div>

<header class="site-header"></header>

<div class="spacer"></div>
<div class="spacer"></div>

<section class="site-section">
    <div class="column">
        <div>I would like to be able to set an later 
             change the height of this green item.
        <div class="item">ITEM</div>
    </div>
</section>

<div class="spacer"></div>
<div class="spacer"></div>

<footer class="site-footer"></footer>

<div class="spacer"></div>

これは私のCSSです：

html, body {
    height:100%;
    margin 0;
    color:blue;
 } 
.spacer {
    height:1%;
 }
.site-header {
    height:8%;
    background-color:yellow;
 }
.site-section {
    min-height:78%;
    background-color:#ffcccc; 
    color:#aaa;
 }
.site-footer {
    height:8%;
    background-color:yellow;
 }
.column {
    width: 50%;
 }
.item {
    height: 40%; 
    background-color: #33cc33;}

ここにデモがあります。

DOCTYPEHTMLに追加するまで、すべてが正常に機能していました。、およびにheight(% で)設定する必要はありませんでした。さて、、、およびを設定する必要があるためです。その結果、もう反応しません。htmlbody.site-section.itemheight: 20%DOCTYPEheighthtmlbody.site-section.itemheight: 20%

これを解決する方法はありますか？

PS私は、この質問のバートのデモに基づいてデモを作成しました。

4

2 に答える 2

0

@CBroe は、親自体が高さ (例: 高さ: 35px) を持っていない限り、高さの割合を実際に取得できないという点で正しいです。div の高さを設定することをお勧めします。その後、内側の div をパーセンテージに設定できます。

しかし、私はあなたのフィドルで少し遊んでposition: absolute、あなたのクラス項目 CSS への追加があなたが探しているものであるかどうかわかりませんでしたか? したがって、CSS は次のようになります。

.item {
    position: absolute;
    height: 40%; 
    background-color: #33cc33;
}

例を示すために変更されたデモを次に示します。

注: 高さは柔軟ですが、高さを 100% に設定すると、残りの div よりも高くなります。

于 2013-10-11T17:50:01.983 に答える
0 
.item{
        position:absolute;
        height:40%;
        background:#33cc33;
    }
.items {
        position:relative;
        height:100%;
        background:inherit;}

HTML

<div class="item">
      <div class='items'>
                    ITEM Try
      </div>
</div>

試す ：）

于 2013-10-11T18:07:11.080 に答える