gpt4 book ai didi

javascript - 滚动条未显示在屏幕上

转载 作者:行者123 更新时间:2023-11-30 14:01:06 25 4
gpt4 key购买 nike

我对定位有疑问;顶部 100px;.当我使用定位时;前 100 像素;并运行该程序,结果将是“google scroller doesn't show up on the screen”。当我不使用时,当我使用定位时;前 100 像素;然后谷歌滚动条出现在屏幕上。

这是 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>

最佳答案

您的要求有点困惑,不清楚是否要使 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;
}

如果你想让正文元素可滚动,那么你可以设置一个高度属性,或者当你的内容增加时,正文将自动滚动。

检查 fiddle here .

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

注意:您需要使用 !important 设置属性值,以便它覆盖并强制浏览器应用该 css。

height:100px !important;

希望对您有所帮助!

关于javascript - 滚动条未显示在屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56301046/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com