web-dev-qa-db-ja.com

DIVはoverflow：scrollに設定されていますが、一番下までスクロールしません

[〜＃〜] div [〜＃〜]メニューが100に設定されていますoverflow：scrollを使用した高さの％。 [〜＃〜] div [〜＃〜]内にul li。私が抱えている問題は、最後までスクロールして最後まで表示できないことですli 。ほとんど見えない。

私のheaderと関係があると思いますヘッダーを削除すると、それ。ヘッダーを元に戻すと、ブラウザーの下に表示され、最後までスクロールして最後のli。

liとヘッダーは両方とも高さがほぼ同じで、ヘッダーが問題を引き起こしています。特にヘッダーではないのではないかと思いますが、CSSで実行したことのほうが多いと思います。

なぜ一番下までスクロールできないのですか？解決策は何ですか？

ここのサンプル： http://jsfiddle.net/D5KU3/2/

<div class="container">

<!--header-->
 <div class="header">
 </div>
<!--end header-->

<!--left-->
 <div class="left">

<!--ul starts here-->

  <ul>

  <li class="hybrid">

    <a href="#">
    <p class="title">Why Cant</p>
    <p class="type">I scroll all the way to the bottom</p></a>

  </li>

liを20回繰り返します

  </ul> <!--ul ends here-->

  </div> <!--container ends here-->

CSS

  body, html {
  height:100%;  
  }

  body {
  background:white;

  }

  .container {
  width:260px;
  height:100%;
  overflow:hidden;
  background:silver;
  margin:0 auto;
  font-family:sintony;
  }

  .header {
  width:100%;
  height:60px;
  background:#000;
  }

  .left {
  width:260px;
  height:100%;
  background:#fff;
  float:left;
  overflow:scroll;
  }


 li.hybrid a {
 display:block;
 background:#16BF14;
 height:60px;
 width:260px;
 text-decoration:none;
 position:relative;
 }



 li.purple a {
 display:block;
 background:#3370CC;
 height:60px;
 width:260px;
 text-decoration:none;
 position:relative;
 }

 p.title {
 position:relative;
 padding-left:10px;
 }

 p.type {
 font-size:12px;
 position:relative;
 padding-left:10px;
 }

 ul {
 margin:0;
 padding:0;
 }

 li p {
 margin:0;
 padding:0;
 list-style-type:none;
 }
htmlcsshtml-listsoverflow
16
user3025512

コンテナにはclass="header"要素とclass="left"要素の両方があり、class="left"要素はコンテナの100％であるため、100％と60ピクセルを合わせたものになります。

コンテナーでbox-sizingおよびpadding-topを使用して、ヘッダー用のスペースを作ることができます。これにより、コンテナの内部サイズが100％から60ピクセルを引いたものになります。次に、ヘッダーの負の上部マージンを使用して、そのパディングの上に配置します。

.container {
    box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -webkit-box-sizing: padding-box;
    padding-top: 60px;
}

.header {
    margin-top: -60px;
}

デモ： http://jsfiddle.net/Guffa/D5KU3/11/

また、ページのマージンを削除することもできます。そうしないと、100％のコンテナとマージンがウィンドウよりも高くなります。

body {
    margin: 0;
    padding: 0;
}
9
Guffa