0

テキストコンテンツを含む div があります。コンテンツがそれほど高くない場合でも、div の高さをブラウザー ウィンドウ (ビュー領域) の高さいっぱいまで拡張したい。

コンテンツがウィンドウの高さを超えてしまう場合は、デフォルトの動作が必要です。つまり、スクロール バーが表示され、かつ div の高さがビュー エリアの高さと同じではありません。

jsfiddle http://jsfiddle.net/bernard/gLjYg/16/にいくつかのコードを追加しました。すべてのテキストが表示されないようにウィンドウのサイズを縮小しない限り、黄色の境界線はウィンドウ領域全体をカバーする必要があります。その場合、テキストはスクロール可能である必要があり、下または上の境界線は非表示になります。

index.html

<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title></title>
</head>

<body>
<div id="container">
    <div class="main">
        <h1>Think of a Nat Geo frame</h1><br>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    </div>
</div>

</body>
</html>

スタイル.css

​body, html {
    margin: 0;
    background-color: #c0c0c0;
}

#container {
    border: 20px solid yellow;
}

.main {
    background-color: white;
    padding: 2em;
}

マークアップはそれほど重要ではありません。ただし、非セマンティック div は避けたいと思います。また、CSS ベースのソリューションを希望します。</p>

4

4 に答える 4

1

どうぞ：

http://jsfiddle.net/gLjYg/10/

.main の高さが 100% の場合に DIV をもう 1 つ追加する必要があり、パディングによって .main が高すぎました。

于 2012-08-02T10:02:45.530 に答える
0

border2 つの div の間でパディングを分割する必要がある理由はありますか? そうでない場合は、これを使用します：

body, html {
    margin: 0;
    background-color: #c0c0c0;
}

#container {
    min-height: 100%;
}

.main {
    background-color: white;
    padding: 2em;
    border: 20px solid yellow;
}

しかし、なぜbody, html完全な高さまで伸びないのか理解できないようです。

于 2012-08-02T10:03:32.637 に答える
0

まあ、これは数年遅れているかもしれませんが、私はこの記事にたどり着きました。これを行う他の人にとっては私の解決策です：

http://jsfiddle.net/gLjYg/59/

まず、すべてのコンテンツを 1 つの div に入れます。

<div class="main">
  <h1>Think of a Nat Geo frame</h1>
  <p>Lorem ipsum...</p>
</div>

次に、幅/高さの測定値 (パディングなどを含む) を理解しやすくするために、CSS にボーダーボックスのサイズ変更を含めました。

* {
  box-sizing: border-box;
}

body, html {
    margin: 0;
    background-color: #c0c0c0;
}

.main {
  border: 20px solid yellow;
  background-color: white;
  padding: 2em;
  margin: 0;
}

最後に、次の JavaScript を追加しました (jQuery を使用):

var $selector = $('.main');

setToWindowHeight($selector);
$(window).resize(function (){
  setToWindowHeight($selector);
});

function setToWindowHeight(selector) {
  selector.css({ 'min-height': $(window).innerHeight() });
}

ページのロード時およびサイズ変更時に、.main div にはウィンドウの高さと同じ最小高が設定されます。ここで重要なのは min-height です。コンテンツがウィンドウよりも小さい場合はウィンドウに合わせて拡大されますが、コンテンツが大きい場合はスクロールでき、何も見えなくなります。

于 2016-11-24T01:47:09.330 に答える