web-dev-qa-db-ja.com

分割高さ100％、コンテンツに合わせて拡大

ページ上にdiv要素があり、その高さは100％に設定されています。体の高さも100％に設定されています。内側のdivには背景があり、そのすべてがボディの背景とは異なります。これはdivの高さをブラウザの画面の高さの100％にするために機能しますが、問題は私がブラウザの画面の高さを超えて垂直方向に広がるdivの中のコンテンツを持っていることです。私が下にスクロールすると、divはあなたがページをスクロールし始めなければならなかったところで終わりますが、内容はそれを超えてオーバーフローします。内側の内容に合わせてdivを常に一番下まで移動させるにはどうすればよいですか。

これが私のCSSの単純化です。

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

ページをスクロールすると、黒さがなくなり、コンテンツは赤い背景の上に流れます。 #some_divで位置を相対位置に設定するか絶対位置に設定するかは関係ありませんが、どちらの方法でも問題は発生します。 #some_div内のコンテンツはほとんど絶対位置に配置されており、データベースから動的に生成されるため、その高さは事前にはわかりません。

編集：これは問題のスクリーンショットです： div problem

csshtmlheightoverflow
139
Joey

これがCSSスタイルで、div上でやるべきことです。

display: block;
overflow: auto;

そしてheightに触れないでください

257
João Pimentel Ferreira

heightをautoに、min-heightを100%に設定します。これでほとんどのブラウザで解決するはずです。

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}
53
Matthew Sprankle

通常、この問題は、親部門の子要素が浮いているときに発生します。これが問題の 最新の解決策 です。

あなたのCSSファイルに .clearfix と呼ばれる次のクラスを疑似セレクタ ：after と共に書いてください。

.clearfix:after {
content: "";
display: table;
clear: both;
}

次に、あなたのHTMLの中で、親のDivに.clearfixクラスを追加します。例えば：

<div class="clearfix">
    <div></div>
    <div></div>
</div>

それはいつもうまくいくはずです。クラス名を。clearfixの代わりに。groupとして呼び出すと、コードの意味がわかりやすくなります。二重引用符 ""の間に、Contentの値にドットやスペースを追加する必要はありません。また、 overflow：auto。 は問題を解決するかもしれませんが、それはスクロールバーを表示するような他の問題を引き起こすのでお勧めできません。

出典：Lisa CatalanoとChris Coyierのブログ

12
Ifti Mahmud

height: 100%をそのままにしてdisplay:block;を使用する場合、divはdiv内のコンテンツと同じだけのスペースを取ります。このようにして、すべてのテキストは黒い背景のままになります。

6
RonnieVDPoel

これを試して：

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
}

IE6以前のバージョンはmin-heightプロパティをサポートしていません。

私は問題はあなたがボディに100％の高さを持っていると言うとき、その背景は1つのブラウザ "ビューポート"（ブラウザのツールバーとステータスバーとメニューバーと除外された表示領域）の高さと同じくらいの高さになりえます。ウィンドウの端）コンテンツが1つのビューポートよりも高い場合は、背景用の高さを超えてオーバーフローします。

あなたのコンテンツが1ページ全体を下までいっぱいにしない場合、ボディのこのmin-heightプロパティは背景を少なくとも1つのビューポートと同じ高さになるように強制する必要があります。

4
Ace Frahm

昔の質問ですが、私の場合はposition:fixedを使用して解決しました。私の状況は少し違うかもしれません。私は、ページがロードされている間に表示する必要があるロードアニメーションを含むオーバーレイされた半透明のdivを持っていました。そのため、height:auto / 100%またはmin-height: 100%を使用すると、ウィンドウ全体が埋められますが、画面外の領域は埋められません。 position:fixedを使用すると、このオーバーレイはユーザーと一緒にスクロールしたので、常に可視領域を覆い、プリロードアニメーションは画面の中央に配置されます。

3
Thomas Smart

この質問は古いかもしれませんが、それは更新に値する。これを行う別の方法は次のとおりです。

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}
1
user9459537

この2行をCSS IDに追加してください。#some_div

display: block;
overflow: auto;

その後あなたはあなたが探しているものを手に入れるでしょう！

1
singhviku

これはかなり簡単な答えなので、私が質問を理解したかどうかは完全にはわかりませんが、ここでは... :)

コンテナのオーバーフロープロパティをvisibleまたはautoに設定しましたか

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

それを追加すると、動的コンテナに必要なサイズに黒いコンテナがプッシュされます。自動はスクロールバーが付属しているようですので、私は自動よりも目に見えることを好みます...

0
jlisham

[OK]を私はこのようなことを試した

体（普通）

MainDiv（すべての内容が含まれる場所）：表示：テーブル;オーバーフロー-y：自動

その正確な書き方ではありませんが、メインのdivをテーブルとして表示させると、スクロールバーが表示されます。

0
alex

こんなことができる

display:block;
overflow:auto;
height: 100%;

これには、コンテンツに従って各動的divが含まれます。あなたがクラスと共通のdivを持っていると仮定すると、それは内容に従って各動的divの高さを増やします。

0
ahmed sharief