13

<html>ページの高さがスクロールを正当化するのに十分でない場合は、タグとタグを<body>ビューポートの高さ全体にするか、ウェブページの高さ全体にする必要があります。

現時点では、次の CSS を使用しています。

html, body {
    height: 100%;
}

Web ページの高さがユーザーがスクロールするのに十分でない場合、これはうまく機能しますが、長い Web ページでは、ユーザーのブラウザーのビューポートの高さまでしか移動しません。私も試しました：

html, body {
    min-height: 100%;
}

heightしかし、それは宣言がまったくないのと同じ効果があるようです。

4

6 に答える 6

7

やってみました：

min-height: 100vh;

これにより、要素の高さがビューポートに設定され、それを超えるとスクロールバーが表示されます。例を次に示します。

http://codepen.io/r3plica/pen/jBaPYB

于 2017-03-16T15:28:39.853 に答える
1

出発点:

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

(または、一部のブラウザーで問題が発生した場合は、ID などを含むコンテナー div を追加します。)

編集:以下の完全なコード例を追加:

<body>
    <aside>Sidebar</aside>
    <div id="main">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</body>

CSS:

* {
  font-size: 2em
}

aside {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: pink;
}

#main {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: red;
}
于 2013-01-04T05:41:53.963 に答える
-1

overflow特定の divの属性を指定する必要があります。ページがスクロールされたり、コンテンツが増えたりしても、コンテンツが確実に表示されるようにします。

div {
    overflow:scroll;
}
于 2013-01-04T05:43:28.840 に答える