Question

我的位置定位有问题；前100像素；当我使用位置固定时前100像素；并运行该程序，结果将是“ Google滚动条未显示在屏幕上”。当我不使用位置固定时；前100像素；然后Google滚动条显示在屏幕上。

这是HTML代码。

<body>
  <section class="container">
    <div style="position:fixed; top:180px" class="First">
      <ul id="ListName" class="">
        <li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
      </ul>     
    </div>


    <div style="position:fixed; top:180px;" class="Second">
      <h1  align="center"> sport</h1>

         <p>

          <ul>
            <li> soccer and,</li>
            <li> football </li>
          </ul>

        </p>

   </div>
 </section>

 <div id="" class="" style="clear:both;"></div>
</body>

这是CSS代码。

<style>
        .container {
            width: 99%;
            height: auto;
            margin: auto;
            padding: 10px;
            font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
        }
        .First {
            height: auto;
            width: 20%;
            background: white;
            border:1px solid #666;
            float: left;
        }
        .Second {
            margin-left: 21%;
            height: auto;
            width:640px;
            border:1px solid #666;
            background: white;
        }



</style>

Answer 1

您的要求有点令人困惑，尚不清楚您是否要使section元素内的第二个div滚动，然后可以通过向Second类添加height或max-height属性来做到这一点。

只有在div或任何容器中的内容超过指定的高度时，任何容器滚动条才会显示相同的内容。

如果要使第二个div可滚动，则需要执行以下操作。

   .Second {
      height:100px !important;
      overflow-y: scroll !important;
      margin-left: 21%;
      height: auto;
      width: 640px;
      border: 1px solid #666;
      background: white;
   }

如果要使body元素可滚动，则可以设置height属性，或者当内容增加时，body可以自动滚动。

检出小提琴here。

我在第二个div中添加了width属性，以使其适合小提琴窗口。您可以将其删除。还可以在正文中粘贴一些示例文本，以证明正文中有足够的文本时正文是可滚动的，或者如果您想要设置固定高度，也可以这样做。

注意：您需要使用！important设置属性值，以便它覆盖并强制浏览器应用该CSS。

height:100px !important;

希望有帮助！

滚动条未显示在屏幕上

1 个答案: