81 
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         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%;}

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

4

8 に答える 8

65

#header1 のコンテンツをラップするためにdiv (以下) を追加すると、これを実行できるはずです。

  1. float の場合#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、フレックス コンテナーになり、その#someidflex grow を より大きい値に設定する必要があります0。

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

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

#someid {
  flex-grow: 1;
}
于 2013-03-13T04:36:59.830 に答える
14

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 の単なる置き換えです。

于 2013-03-13T03:48:22.630 に答える
6 

    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>

于 2016-02-15T12:32:42.100 に答える
5

これはテーブルで行うことができます:

<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は常に優れています。

于 2015-08-11T22:14:47.587 に答える
1

これが遅いエントリであることは知っていますが、2016 年になっても IE でフレックスが完全にサポートされていないことに驚いています (現在、フレックスをサポートしているのは 11 だけであり、そのhttp://caniuse.com/#feat=で大きなバグがあります)。 flexbox ) は、ビジネスの観点からは素晴らしいものではありません! だから、IEがシャットダウンされるまで、最もクロスブラウザフレンドリーな解決策はJS / Jqueryでなければならないと思いますか？

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

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

明らかに、ウィンドウとヘッダーを置き換えて、基本的な計算を行うことができます。個人的には、フレックスについてはまだ確信が持てません...

于 2016-05-25T11:29:18.277 に答える
0

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

html:

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

CSS:

section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}
于 2015-05-07T18:57:18.753 に答える