有一种方法可以用CSS设置全屏布局，其中页眉固定，页脚不固定(但在页面末尾(，滚动条在页眉之后开始？
在线上有很多布局，但每次都有滚动条越过标题。
片段中应该有这样的例子
<!DOCTYPE HTML>
<html lang="en">
<head>
<style>
body, html{min-height:100%;height:100%; width:100%; margin:0px;padding:0px;font-family:arial;}
p {margin:0;}
.navbar {
position:fixed;
top:0px;
text-align:center;
width:100%;
height:45px;
background:#454545;
line-height:45px;
color:#ccc;
border-bottom: 1px solid #FFF;
}
.content {
/* height:100%; width:100%; Why wont these work??? */
min-height:100%;
height: 300px;
background:#3b3b3b;
text-align:center;
color:#FFF;
margin-bottom: -45px; /* for footer */
}
.content:before {
content: "";
display: block;
height: 45px;
}
.footer, .content:after {
/* .push must be the same height as footer */
height: 45px;
}
.footer {
background: #454545;
color: #FFF;
text-align:center;
line-height:45px;
height:45px;
}
</style>
</head>
<body>
<div class="navbar">
<span>Fixed Header (content under here)</span>
</div>
<div class="content">
<p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
</div>
<div class="footer">
<span>Sticky footer!</span>
</div>
</body>
</html>这是一个漂亮的布局，但我不想要滚动条越过固定的标题。
如何设置HTML和CSS以获得相同的结果，但滚动条不在固定的标题上？
您可以将overflow: hidden;添加到body，并将overflow: auto;添加到.content
<style>
body, html{
min-height:100%;
height:100%;
width:100%;
margin:0px;
padding:0px;
overflow: hidden;
font-family:arial;
}
p {margin:0;}
.navbar
{
position:fixed;
top:0px;
text-align:center;
width:100%;
height:45px;
background:#454545;
line-height:45px;
color:#ccc;
border-bottom: 1px solid #FFF;
}
.content
{
/* height:100%; width:100%; Why wont these work??? */
min-height:100%;
height: 300px;
background:#3b3b3b;
text-align:center;
color:#FFF;
margin-bottom: -90px; /* for footer */
margin-top: 45px;
overflow: auto;
}
.content:before {
content: "";
display: block;
height: 45px;
}
.footer, .content:after {
/* .push must be the same height as footer */
height: 45px;
}
.footer {
background: #454545;
color: #FFF;
text-align:center;
line-height:45px;
height:45px;
}
</style>
<div class="navbar">
<span>Fixed Header (content under here)</span>
</div>
<div class="content">
<p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor aliquam nulla facilisi cras. Et pharetra pharetra massa massa. Dui id ornare arcu odio ut sem nulla. Commodo viverra maecenas accumsan lacus vel facilisis volutpat. Maecenas accumsan lacus vel facilisis volutpat est. Quam quisque id diam vel quam elementum pulvinar etiam non. Consequat ac felis donec et. Augue lacus viverra vitae congue eu. Mattis molestie a iaculis at.
Odio ut sem nulla pharetra diam sit amet nisl suscipit. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Ac auctor augue mauris augue. Nec feugiat nisl pretium fusce id velit ut tortor. Nibh venenatis cras sed felis eget velit. Pellentesque habitant morbi tristique senectus et netus et malesuada. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Pulvinar pellentesque habitant morbi tristique senectus. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Tincidunt lobortis feugiat vivamus at augue. Turpis cursus in hac habitasse platea dictumst quisque sagittis. Tristique senectus et netus et malesuada fames. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Eget mi proin sed libero. Lacus laoreet non curabitur gravida arcu ac. Sem viverra aliquet eget sit amet tellus cras adipiscing.
Non tellus orci ac auctor augue. Eget sit amet tellus cras adipiscing enim eu turpis. Urna neque viverra justo nec ultrices dui sapien. Lectus sit amet est placerat in egestas erat imperdiet sed. Quam vulputate dignissim suspendisse in. Quis viverra nibh cras pulvinar mattis nunc. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet. Sit amet facilisis magna etiam. Purus in mollis nunc sed id. Auctor eu augue ut lectus arcu bibendum at varius vel. Tincidunt augue interdum velit euismod in pellentesque. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Dictum fusce ut placerat orci nulla pellentesque dignissim. Et molestie ac feugiat sed lectus vestibulum. Aliquet enim tortor at auctor urna.
At tellus at urna condimentum. Venenatis lectus magna fringilla urna. Egestas erat imperdiet sed euismod nisi. Magna fringilla urna porttitor rhoncus dolor purus. Pretium viverra suspendisse potenti nullam. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Senectus et netus et malesuada fames ac turpis. Posuere urna nec tincidunt praesent semper feugiat nibh. Aliquam ut porttitor leo a diam sollicitudin. Ultricies leo integer malesuada nunc vel. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Tempus egestas sed sed risus pretium quam vulputate. Morbi enim nunc faucibus a pellentesque sit amet porttitor eget. Netus et malesuada fames ac.
Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Sagittis eu volutpat odio facilisis mauris. Pharetra vel turpis nunc eget lorem dolor sed. Tincidunt vitae semper quis lectus nulla at volutpat diam. Dui nunc mattis enim ut. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Sem integer vitae justo eget. Viverra aliquet eget sit amet tellus cras adipiscing. Dolor morbi non arcu risus quis varius. Placerat orci nulla pellentesque dignissim enim sit amet. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Nibh praesent tristique magna sit amet purus gravida. Morbi tincidunt augue interdum velit euismod in pellentesque. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Massa enim nec dui nunc mattis. Arcu vitae elementum curabitur vitae nunc sed velit. Justo laoreet sit amet cursus sit amet dictum. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Massa ultricies mi quis hendrerit dolor.
Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Viverra tellus in hac habitasse platea. Enim tortor at auctor urna nunc id cursus metus. Dolor purus non enim praesent. Et netus et malesuada fames ac. Quis enim lobortis scelerisque fermentum dui faucibus in. Accumsan tortor posuere ac ut consequat semper. Id volutpat lacus laoreet non curabitur gravida arcu. Donec et odio pellentesque diam volutpat commodo. Ante metus dictum at tempor commodo ullamcorper a. Convallis posuere morbi leo urna molestie. Sit amet risus nullam eget felis.
Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Id leo in vitae turpis massa sed elementum tempus. Congue quisque egestas diam in arcu cursus euismod quis. Mauris nunc congue nisi vitae suscipit tellus mauris. Amet massa vitae tortor condimentum lacinia. Diam ut venenatis tellus in metus vulputate eu scelerisque. Faucibus in ornare quam viverra orci sagittis. Accumsan lacus vel facilisis volutpat est velit egestas dui. Duis ut diam quam nulla porttitor. Duis at consectetur lorem donec massa sapien faucibus. Turpis egestas integer eget aliquet. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. A lacus vestibulum sed arcu non odio euismod lacinia at. Quam elementum pulvinar etiam non quam. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Volutpat consequat mauris nunc congue. Mi quis hendrerit dolor magna eget. Malesuada bibendum arcu vitae elementum. Et malesuada fames ac turpis egestas maecenas pharetra. Nulla facilisi morbi tempus iaculis.
Turpis in eu mi bibendum neque egestas congue quisque. Consequat semper viverra nam libero justo. Tortor at auctor urna nunc id cursus. Fusce ut placerat orci nulla. Egestas sed tempus urna et. Felis bibendum ut tristique et egestas quis ipsum suspendisse. Mi in nulla posuere sollicitudin aliquam ultrices. Quis risus sed vulputate odio ut enim blandit. A diam sollicitudin tempor id. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Condimentum lacinia quis vel eros donec ac odio. Iaculis eu non diam phasellus. Ultricies integer quis auctor elit sed vulputate mi sit. Sodales ut etiam sit amet nisl purus. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Turpis egestas maecenas pharetra convallis. Integer feugiat scelerisque varius morbi. Faucibus scelerisque eleifend donec pretium.
</div>
<div class="footer">
<span>Sticky footer!</span>
</div>