2

私は次のレイアウトのdivを持っています

<html style="height:100%">
<body style="height:100%">
    <div id="divBody" style="height:100%;width:1000px">
        <div id="divHeader" style="height:30px"></div>
        <div id="divContent" style="height:100%">
            <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
            <div id="divRight" style="width:800px"></div>
        </div>
    <div>
</body>
</html>

私の問題は、divContentの高さが体の100％であるということです。私がする必要があるのは、divBodyの高さ全体からdivHeaderの高さを引いたものです。そこで、divContentの高さをautoに設定しました。

<html style="height:100%">
<body style="height:100%">
    <div id="divBody" style="height:100%;width:1000px">
        <div id="divHeader" style="height:30px"></div>
        <div id="divContent" style="height:auto">
            <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
            <div id="divRight" style="width:800px"></div>
        </div>
    <div>
</body>
</html>

これで、divContentの高さは正しくなり、divBodyの100％からdivHeaderの高さを引いたものになりますが、divLeftの高さはその親（divContent）の100％を満たしません。ここで両方の世界を最大限に活用するにはどうすればよいですか？

4

4 に答える 4

1

ヘッダーに固定ピクセル数を使用する代わりに、パーセンテージを使用する必要があります。ヘッダーとコンテンツの幅は 100% である必要がありますが、高さは「自動」であるため、実際には、使用している body div 内で実際の必要性に合わせて調整されます。

左右のdivに関しては、両方とも高さ100％に設定する必要があると思います

于 2012-05-15T22:23:07.110 に答える
1

の高さ#divHeaderが 30px であることがわかっているので、質問に対する簡単な答えは、次のようcalc()に onを使用すること#divContentです。

#divContent {
  height: calc(100% - 30px);
}

困難な部分は#divContent、他の兄弟の高さが不明または動的である場合のように、兄弟の高さを設定することです。そんなときに役立つのがCSS Flexです。

.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top {
  flex-shrink: 0;
}

.bottom {
  height: 100%;
}

クラスを持つ要素は、bottom100% の高さからその兄弟の高さを差し引いたものを使用します。このflex-shrink: 0ルールは、主に iOS デバイスで、兄弟の縮小を避けるために重要です。

Codepen での作業例はこちら。

于 2020-02-25T13:09:35.907 に答える
0

2つの列の高さと固定ヘッダーの高さだけが気になる場合は、それを実現するのに役立つCSSハックがあります。

このHTMLを検討してください。

<html style="height:100%">
<body style="height:100%">
    <div id="divBody">
        <div id="divHeader">Header</div>
        <div id="divContent">
            <div id="divLeft">Left</div>
            <div id="divRight">Right</div>
        </div>
    </div>
</body>
</html>​

そして次のCSS：

#divBody {
    height: 100%;
    width: 1000px;
    overflow: hidden;
}

#divHeader {
    height:30px;
    background-color: Yellow;
}

#divContent {
    height:auto;
    background-color: Aqua;
    position: relative;
}

#divLeft {        
    height:100%;
    float:left;
    width:200px;
    border-left:1px solid black;
    background-color: Azure;

    padding-bottom: 30000px;
    margin-bottom: -30000px;
}

#divRight {
    height: 100%;
    width:800px;
    background-color: Pink;

    padding-bottom: 30000px;
    margin-bottom: -30000px;
}

これがイラスト付きのJSFiddleです：http：//jsfiddle.net/3rDNC/

​
于 2012-05-15T22:40:02.523 に答える