我想建立一个页面,CSS,这就像苹果的页面在这里:http://www.apple.com/macbook-pro/CSS固定页脚,浮动头
这个页面有相似但不优雅的东西,因为它使用JavaScript: http://lifeinthegrid.com/simple-css-fixed-header/
我正在尝试构建一个带有小标题滚动页面的页面,但在此之下,导航栏会随标题滚动,但只显示在屏幕顶部,然后在内容滚动时停留在顶部。
我还需要一个页脚,如果内容没有填充到窗口的底部,它将保持固定在底部。
我的页脚工作正常,但标题只是滚动。当我尝试将position:fixed和top:0添加到我的标题或导航样式中时,标题或导航条就会消失。我该如何做这项工作?
我现在的CSS看起来像:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
height:40px;
background-color:#333;
}
#headerbox {
width:1000px;
margin:auto;
padding-top:10px;
}
#navigation {
height:50px;
background-color:#eeeeee;
border-bottom:1px solid #dddddd;
}
#content {
padding-bottom:50px; /* Height of the footer element */
}
#contentbox {
width:1000px;
margin:auto;
padding-top:20px;
padding-bottom:20px;
}
#footer {
height:50px;
position:absolute;
right:0;
bottom:0;
left:0;
width:100%;
background-color:#eeeeee;
border-top:1px solid #dddddd;
}
#footerbox {
width:1000px;
margin:auto;
padding-top:10px;
}
你可以让jsfiddle更好地帮助你 –
苹果页面也使用js。 – gaynorvader
https://jsfiddle.net/11pa9o9d/ 有没有一个例子,我可以看到这是否正确? JS是好的,如果这是它的工作方式。 – Trygve