0

以前に同様の質問を見たことがあると思いますが、これを修正するものは何も読んでいません。

基本的に、ビューポートを満たす高さ 100% の div があります。この div 内には、高さ 40px の h1 タグと、ページの残りの高さを埋める高さ 100% の順序付けられていないリストがあります。

40px の H1 タグが原因で、ページに望ましくない垂直スクロール バーが表示されます。

同様の質問に対する別の回答はoverflow:hidden、div に追加することでした。これはしばらくの間うまくいきましたが、これを見つけて問題にしました。順序付けされていないリストにスクロール バーが必要なX個のリスト アイテムを取得するoverflow: hiddenと、div が原因で一番下の 2 つのアイテムが表示されません。デモについては、以下のリンクを参照してください: (ここ)。

誰かがこれで私を助けることができれば、それは大歓迎です。

HTML:

<div>
  <h1>Header</h1>
  <ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>

CSS:

html {
  height: 100%;
}
body,
h1,
ul {
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
}
div {
  height: 100%;
  width: 300px;
  overflow:hidden;
}
h1 {
  height: 40px;
  line-height: 40px;
}
ul {
  list-style: none;
  background: red;
  height: 100%;
  overflow: auto;
}
4

6 に答える 6

0

これは私のためにそれを修正したものです：

    body {
    height: auto;
    overflow:hidden;
}

div {
    height: 100%;
    width: 300px;
}

ul {
    overflow: scroll;
    height: 100%;
}

したがって、本体に height: auto と overflow:hidden を追加すると、ページのスクロールバーが削除されます。

于 2013-09-25T10:49:03.173 に答える
0

必要な変更は 1 つだけです。body を height:auto に設定するか、それがデフォルトであるため省略します。

body {
  height: auto;
}
于 2013-09-25T10:40:27.410 に答える
0 
ul {
  list-style: none;
  background: red;
  height: 100%;
  overflow: auto;
}

「auto」から「hidden」にする

于 2013-09-25T10:43:09.970 に答える
0

解決策 1: calc() 関数を使用する

最新のブラウザーをサポートしている場合は、次のcalc関数を使用できます。

html, body {
    height: 100%;
}
body, h1, ul {
    margin: 0;
    padding: 0;
}
div.wrapper {
    height: 100%;
    width: 300px;
    overflow: auto;
}
h1 {
    height: 40px;
    line-height: 40px;
}
ul {
    list-style: none;
    background: red;
    height: calc(100% - 40px);
    overflow: auto;
}

ul要素の高さを に設定すると、残りのスペース100% - 40pxに収まる正確な高さが計算されます。ul

デモを参照してください: http://jsfiddle.net/audetwebdesign/KNShL/

解決策 2: 絶対配置を使用する

ul絶対配置を使用して、親ブロックに正確に収まるようにすることもできます。

html, body {
    height: 100%;
}
body, h1, ul {
    margin: 0;
    padding: 0;
}
div.wrapper {
    height: 100%;
    width: 300px;
    position: relative;
}
h1 {
    height: 40px;
    line-height: 40px;
}
ul {
    list-style: none;
    background: red;
    overflow: auto;
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    width: 100%;
}

この場合、親ブロックに設定してから、オフセットを 、 、および幅に設定して子要素で使用position: relativeし、幅を100 % に設定します。div.wrapperposition: absoluteultop: 40pxbottom: 0right: 0

絶対配置アプローチは、CSS2 をサポートする古いブラウザーのいずれでも機能するはずです。

デモを参照してください: http://jsfiddle.net/audetwebdesign/929sW/

于 2013-09-25T10:59:02.393 に答える
0

常にキーワード「auto」を使用してください。% の数字は、常にエラーを発生させたり、html で画面をぼやけさせたりします。つまり、画面が変更されるたびに、正解にはなりません。また、 % を使用している場合は、親に「パディング」と「マージン」を与えないでください。常にスクリーンを使用してください。

于 2013-09-25T11:44:07.023 に答える
0

高さを AUTO に設定するか、min-height と max-height を指定できます。

例:

ul{
 /*
 It's one or the others
 */
    height:auto;
    min-height: 400px;
    max-height: 600px;
}

min と max を使用すると、コンテンツの量によって (400 と 600) の間の値が設定されます。

そしてoverflow: auto;あなたの問題かもしれません、あなたはこれをに設定することができますoverflow: hidden;

于 2013-09-25T10:44:04.820 に答える