web-dev-qa-db-ja.com

残りの高さの100％を埋める方法は？

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

上記の（1）の内容は、動的に生成されるページで増減する可能性があるため不明です。上記の2番目のdiv（2）は、残りのスペースを埋める必要があります。

これが私のhtmlの例です

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

css ...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

または、この方法は間違っていますか？どうすればいいですか？私デモを見て、間違いを見せてください。

htmlcssheightfill
74
Bhojendra Rauniyar

Div（#header以下）を追加して、1のコンテンツをラップする場合、これを行うことができます。

  1. #headerをフロートすると、#someidからのコンテンツがその周りを流れます。

  2. 次に、#headerの幅を100％に設定します。これにより、含まれるdivの幅[#full]に合わせて拡張されます。これにより、#someidのすべてのコンテンツが#headerの下に効果的にプッシュされます。これは、側面の周りに流れる余地がないためです。

  3. 最後に、#someidの高さを100％に設定します。これにより、#fullと同じ高さになります。

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

更新

flexboxは、今日の最新のブラウザーで十分にサポートされていることに言及する価値があると思います。 CSSは、#fullがflexコンテナになるように変更でき、#someidはflexを0より大きい値に設定する必要があります。

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}
59
thgaskell

ページでdivの高さを100％にするには、divの上の階層の各オブジェクトも100％に設定する必要があります。例えば：

html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }

私はあなたの質問を完全に理解することはできませんが、これがあなたの言っていることだと思います。

これは私が働いている例です：

<html style="height:100%">
    <body style="height:100%">
        <div style="height:100%; width: 300px;">
            <div style="height:100%; background:blue;">

            </div>
        </div>
    </body>
</html>

Styleは、私が外部化していないCSSの単なる置き換えです。

10
Serdalis

これはテーブルを使用して実行できます。

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="0%"><td>
        <div id="full">
            <!--contents of 1 -->
        </div>
    </td></tr>
    <tr><td>
        <div id="someid">
            <!--contents of 2 -->
        </div>
    </td></tr>
</table>

次に、cssを適用して、someidが残りのスペースを埋めるようにします。

#someid {
    height: 100%;
}

今、私は群衆から怒った叫び声を聞くことができます。聞いてください。

コンテナdivをページの全高にする以外に何も達成しない承認済みの回答とは異なり、このソリューションでは、div＃2が質問で要求された残りのスペースを埋めます。 2番目のdivに割り当てられた全高を埋める必要がある場合、現在これが唯一の方法です。

もちろん、私が間違っていることを証明してください！ CSSは常に優れています。

5
Jonathan Graef
    html,
    body {
        height: 100%;
    }

    .parent {
        display: flex;
        flex-flow:column;
        height: 100%;
        background: white;
    }

    .child-top {
        flex: 0 1 auto;
        background: pink;
    }

    .child-bottom {
        flex: 1 1 auto;
        background: green;
    }
    <div class="parent">
        <div class="child-top">
          This child has just a bit of content
        </div>
        <div class="child-bottom">
          And this one fills the rest
        </div>
    </div>
4
Ernesto Hegi

私はこれが遅いエントリであることを知っていますが、2016年でさえ、フレックスのIEサポートの完全な欠如に驚いています（現在11がそれをサポートする唯一のものであり、その主にバグがあります http ：//caniuse.com/#feat=flexbox ）これはビジネスの観点からすれば素晴らしいことではありません！だから私はIEがシャットダウンされるまで最良の解決策であり、最もブラウザに優しい解決策は確かにJS/Jqueryのものでなければならないと思う？

ほとんどのサイトはすでにJqueryを使用しており、非常に単純な例（私のコードの場合）は次のとおりです。

$('#auto_height_item').height($(window).height() - $('#header').height());

あなたは明らかにウィンドウとヘッダーを置き換えて、基本的な数学に仕事をさせることができます。個人的には、まだflexについて納得していない...

1
Ukuser32

短すぎるページにこれを追加しました。

html：

<section id="secondary-foot"></section>

css：

section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}
0
user4533280

Div（fullおよびsomeid）の両方を含むdivを作成し、そのdivの高さを次のように設定します。

高さ：100vh;

含まれているdiv（fullおよびsomeid）の高さを「auto」に設定する必要があります。それで全部です。

0
H.A.

これは古い質問ですが、最近ではCCSグリッドという非常に簡単なフォームがありますので、divを例に挙げてみましょう。

<div id="full">
  <div id="header">Contents of 1</div>
  <div id="someid">Contents of 2</div>
</div>

次に、CSSコード：

.full{
  width:/*the width you need*/;
  height:/*the height you need*/;
  display:grid;
  grid-template-rows: minmax(100px,auto) 1fr;
 }

それだけです。2番目の行であるscilicetとsomeideは、プロパティ1frのために残りの高さを取ります。最初のdivは、最小100pxで必要な最大値を持ちます。

プログラマーの生活を楽にするために、CSSは大きく進歩したと言わなければなりません。

0
Juan Joya