0

コンテナ div に多くの子 div があるが、どの div にも実際のテキスト コンテンツがないというシナリオがあります。すべての子 div は、コンテナ div の%で幅と高さを持ちます。コンテナ div の幅と高さをpxで指定すると、ブラウザに表示されます。コンテナの幅と高さを%で指定すると、どの div もブラウザでレンダリングされません。この小さなスニペットのように。

<div class="container">
    <div class="line1 line">
        <div class="item1">
        <div class="item2">
    </div>
    <div class="line2 line">
        <div class="item1">
        <div class="item2">
    </div>
</div>

CSS:

.container{
    width: 540px;
    height: 440px;
}
.line{
    margin: 5% auto;
}
.line1{
    width: 15%; 
    height: 8%;
}
.line2{
    width: 40%;
    height: 12%;
}

私が行った場合

.container{
  width: 50%; //50% of browser screen width
  height: 60%;//60% of browser screen height
}

次に、div のどれもブラウザーでレンダリングされません。解決策はありますか？

4

1 に答える 1

1

私のために働く：http://jsbin.com/esosoc/1/edit

@dominic-bc が指摘したように、 を設定することをお勧めしますhtml, body { height: 100%; }。body に関連するパーセンテージですべてが表示されますが、 body の高さはコンテンツの高さに基づいて測定されます。したがって、高さを明示的に設定します。

于 2013-06-16T18:13:46.703 に答える