1

体の要素に問題があります。画面の100％を占めているようです。ただし、ブラウザを小さくドラッグしてから下にスクロールすると、本体は伸びません。

代表的な例として、このjsFiddleをご覧ください。

4

4 に答える 4

6

height: 100%;は、サイトが表示されるウィンドウの高さであり、Webサイトの高さではありません。これにより、下にスクロールすると背景が紫色になります。

これを追加するだけです：

html { background: green; }

そして、

body { background: green; }

背景を常に緑色にするため。（JSFiddle）

于 2012-08-15T03:50:50.437 に答える
1

このフィドルが質問に答えると思います。私はこれを本番環境で使用していて、うまく機能しています。

HTML：

<html>
    <body>
        <div class="main-wrapper contain">
                         
            <section class="main-content">                    
                Main Content
            </section> <!-- end .main-wrapper -->
        
            <div class="other-thing">
                Other thing for example.
            </div>
                     
        </div> <!-- .main-wrapper -->
    </body>
</html>

CSS：

/* hard reset */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    position: relative;
    padding: 0; margin: 0;
} 

/* micro clear fix (clears floats) */
    .contain:before,
    .contain:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.contain:after {
    clear: both;
}
.contain {
    *zoom: 1;
}

html {
    height: 100%; /* 01 */
    /* tells html to go ahead and feel free to be 100% height */
}

body {
    min-height: 100%; /* 02 */
    /* expands to push html to the limit */
}

.main-wrapper {
    /* overflow: hidden; */
    /* in this case - forces wrapper to contain content (like a clear-fix) */
    /* use clear fix instead */

}

/* if you see yellow - we are failing */

.main-content {
    width: 100%;
    float: left;
}

.other-thing {
    width: 100%;
    float: left;
}

私はこれをテストしました-そして、あなたがあなたのすべてのコンテナとものが実際に適切に含まれていると仮定すると、それはあらゆる状況で機能するようです。このオーバーフローには落とし穴があるはずです。または人々はclear-fixを使用しないでしょう。だから-私はもっと多くの入力を聞いてみたいです。

または、htmlとbodyを100％にして、.main-wrapperをmin-height：100％にすることもできると思います。そしてそれも同様に機能します。基本的に-何かがそのすべてのコンテナを強制的に伸ばす必要があります。そのためには、これらのコンテナをすべて100％に設定して、その能力があることを覚えておく必要があります。または、私はdivを擬人化しすぎていますか...

UPDATE 2021： Webの性質は、コンテンツが「形状」や「スペース」、またはあなたがそれを呼びたいものを定義できるようにすることです...したがって、体はそれがどれほど「背が高い」かを実際には知りません。ブロックレベルの要素であるため、100％の幅であることがわかります。したがって、HTMLに高さを指定しない限り：100％、次にすべての子...そうすると、「100％」が実際に何を意味するのかがわかりません。何の100％？ダッシュボードアプリとデスクトップのフルスクリーンレイアウトの場合、高さを設定することをお勧めします（ただし、ほとんどの場合はそうではありません）。現在、100vhユニットを使用できます。一般的なルール：コンテンツにその親要素のサイズを決定させ、Webの性質に合わせて機能させるだけです。（そこにあるすべてのコードを無視してください！2021：フレックスボックス+グリッドです！:)

于 2013-02-17T21:31:56.147 に答える
0

height: 100%;を削除するだけで、を削除するだけ<body>で、準備が整いますheight: 300px;。<figure>


次のコードも使用できます：http：//jsfiddle.net/Asustaba/LBu8z/8/

于 2012-08-15T20:46:35.090 に答える
0

1）2つのことを同時に解決しながら、ボディを画面全体に表示したい場合（ボディには動的なコンテンツがあるため）

  1. 十分なコンテンツがありません：画面全体に表示するのに十分なコンテンツがないため、ボディは少なくともビューポートと同じ高さです
  2. コンテンツが多すぎる：本文はHTMLと同じ高さである必要があります

これで、 min-height：100vhを使用できます。これは、ビューポートの高さの100％を意味します ：http： //jsfiddle.net/LBu8z/89/

Opera Miniを除いて、すべてのブラウザでサポートされています：caniuse.com/#search=vh

2）固定の背景画像が必要な場合は、固定位置のボディを伸ばすことをお勧めします：後

background-sizing：coverは固定されたバックラウンドでは正しく機能しないため、本番環境でこのソリューションが必要でした。したがって、body：afterを修正し、背景画像を修正しないようにする必要がありました。ここで確認できます：https ：//www.doklist.com/

body:after{
  content:"";
  background:green;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-1;
}

3）本体のみで行いたい場合は、オーバーフロースクロールで固定本体を伸ばします。ただし、一部の要素（ブートストラップツールチップやポップオーバーなど）に干渉する可能性があることに注意してください。

body {
    background: green;
    overflow-y:scroll;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
于 2017-03-25T08:31:20.643 に答える