gpt4 book ai didi

html - CSS:滚动条在窗口下方开始几个像素

转载 作者:行者123 更新时间:2023-11-28 13:27:25 26 4
gpt4 key购买 nike

我想固定页眉:页眉始终位于页面顶部,我的全部内容(包括页脚在内的所有内容)都可以滚动。标题为 60 像素高,如下所示,将其固定在顶部不是问题。

我要解决的问题(仅使用 CSS)是让滚动条从距顶部 60 像素以下开始。如您所见,滚动条的底部(2.箭头)实际上被隐藏/向下 move 。我猜我有问题的 60px。所以它是这样的:

scrollbar

HTML:

<!DOCTYPE html>
<head>
...
</head>

<body>
<header>
...
</header>

<div id="content">
...
</div>
</body>
</html>

CSS:

html, body {
height: 100%;
}

body {
background: #d0d0d0;
overflow-y: hidden;
}

header {
background: #fff;
height: 60px;
width: 100%;

position: fixed;
top: 0;
}


#content {
margin-top: 60px;
height: 100%;
width: 100%;

overflow-y: scroll;
}

我的 CSS 中缺少什么?谢谢大家。

//编辑作为对此处(对 John Grey)的最重要答案的回复

评论下方的评论:

scrollbar_2

最佳答案

这是一个 jsfiddle 如何解决您的问题: http://jsfiddle.net/sTSFJ/2/

这是CSS:

html, body {
height: 100%;
margin: 0px;
padding: 0px;
}

#wrapper {
width: 100%;
height: 100%;
margin: auto;
position: relative;
}

#header {
height: 40px;
background-color: blue;
color: #fff;
}

#content {
position:absolute;
bottom:0px;
top: 40px;
width:100%;
overflow: scroll;
background-color: #fff;
color: #666;
}​

关于html - CSS:滚动条在窗口下方开始几个像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13193197/

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