-3

高さが100％の最初のdiv（これは問題ありません）と、親divの高さ全体をカバーする2つのdivを含むページが必要です。2つのdivの高さがパーセンテージである場合、問題はありませんが、実際には、1つのdivをピクセル（特定の高さ）で、もう1つをパーセンテージ（残りをカバー）で指定する必要があります。

CSSでそれを行うことはできますか、それともjavascriptを使用する必要がありますか？（可能な場合はCSSのみを使用するのが好きです）

HTML構造：

<html style="height: 100%;">
<head></head>
<body style="height: 100%;">
    <div style="height: 100%;">
        <div style="height: 40px;"></div>
        <div style="height: ???"></div>
    </div>
</body>
</html>

答えてくれてありがとう。

Ecorce

4

2 に答える 2

0

まず第一に、それらを上から下に表示したい場合は、floatプロパティを使用する必要があります。2番目の高さcalc(100% - 40px)については、このプロパティのブラウザサポート（http://caniuse.com/#feat=calc）を使用できます。

于 2013-03-16T14:57:33.883 に答える
0

親divの使用可能なスペースを埋めるには、これを使用します

.parent
{
  position: relative;
}

.child
{
  position: absolute;
  bottom: 0;    
  top: 40px;   /* can set accordingly"*/   
}

だからこのコードを試してみてください

 <div class="parent">
        <div class="fixedChild"></div>
        <div class="dynamicChild">ss</div>
</div>

CSS：

body,html
{
    height:100%;
}
.parent
{
    height:100%;
    min-height:100%;
    background-color:Black;
    position: relative;
}
.fixedChild
{
    height:40px;
    background-color:Green;
}
.dynamicChild
{
    background-color:Red;
    position: absolute;
    top: 40px;
    bottom: 0;
    width:100%;
}

これがJSフィドルのデモです

于 2013-03-16T15:10:39.540 に答える