我正在尝试做一个基本的页面布局，其中导航栏始终可见，页脚位于页面底部，两者之间是内容。如果内容太小，它应该拉伸并将页脚推到窗口的底部。我有以下代码，由于某种原因是可滚动的，并且不需要的未使用区域出现在页脚之后。https://jsfiddle.net/etLx01dj/<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { height: 100%; margin: 0; padding: 0; } .navigation { position: fixed; left: 0; top: 0; width: 100%; height: 4em; background-color: green; } .content { background-color: darkgrey; height: 100%; margin-top: 4em; } .footer { position: absolute; bottom:0; left: 0; width: 100%; height: 3em; background-color: red; } </style> </head> <body> <div class="navigation"> <p>nav works</p> </div> <div class="content"> <p>content works</p> </div> <div class="footer"> <p>footer works</p> </div> </body></html>额外问题：当导航固定时是否可以避免margin-top: 4em内容？提前感谢您的帮助！
2 回答
白板的微信
TA贡献1883条经验 获得超3个赞
这是使用 Flexbox 的一种简洁方法：
html,
body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
body>* {
box-sizing: border-box;
padding: 1rem;
width: 100%;
}
.navigation,
.footer {
flex-grow: 0;
background-color: #f8f8f8;
min-height: 3em;
box-shadow: 0 0 8px 0 rgba(0,0,0,.1), 0 1px 4px 0 rgba(0,0,0,.07), 0 1px 3px -2px rgba(0,0,0,.06);
}
.navigation {
border-bottom: 1px solid rgba(255,255,255,.85);
}
.footer {
border-top: 1px solid rgba(255,255,255,.85);
}
.content {
flex-grow: 1;
overflow-y: auto;
}
.tall-content {
height: 200vh;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="navigation">
<div>nav works</div>
</div>
<div class="content" contentEditable="true">
<p> Click and edit (copy/paste/delete) the content, to see how it works with various heights...
<p>Maroon grapple Jolly Roger deadlights schooner gangway aft booty cutlass cackle fruit. Handsomely topgallant doubloon Jack Tar Jack Ketch landlubber or just lubber dance the hempen jig warp jib long clothes. Black spot red ensign bowsprit wench sheet nipperkin line gibbet scuppers careen.
<p>Matey Yellow Jack furl nipper heave down Sink me ballast boatswain barkadeer bilge water. Brethren of the Coast transom bring a spring upon her cable Davy Jones' Locker draft tender trysail holystone Admiral of the Black jolly boat. Yo-ho-ho careen coxswain Yellow Jack capstan galleon Jack Tar spanker loaded to the gunwalls man-of-war.
<p>Coffer plunder come about Sea Legs gun Jolly Roger squiffy barkadeer Plate Fleet sloop. Take a caulk knave Pirate Round Sail ho Jack Tar Gold Road topgallant cutlass cog grog. Hands walk the plank quarterdeck maroon aye Spanish Main haul wind boatswain coffer pinnace.
<p>Maroon grapple Jolly Roger deadlights schooner gangway aft booty cutlass cackle fruit. Handsomely topgallant doubloon Jack Tar Jack Ketch landlubber or just lubber dance the hempen jig warp jib long clothes. Black spot red ensign bowsprit wench sheet nipperkin line gibbet scuppers careen.
<p>Matey Yellow Jack furl nipper heave down Sink me ballast boatswain barkadeer bilge water. Brethren of the Coast transom bring a spring upon her cable Davy Jones' Locker draft tender trysail holystone Admiral of the Black jolly boat. Yo-ho-ho careen coxswain Yellow Jack capstan galleon Jack Tar spanker loaded to the gunwalls man-of-war.
<p>Coffer plunder come about Sea Legs gun Jolly Roger squiffy barkadeer Plate Fleet sloop. Take a caulk knave Pirate Round Sail ho Jack Tar Gold Road topgallant cutlass cog grog. Hands walk the plank quarterdeck maroon aye Spanish Main haul wind boatswain coffer pinnace.
</div>
<div class="footer">
<div>footer works</div>
</div>
</body>
</html>
没有硬编码的边距/填充，没有绝对或固定的定位。页脚和页眉有flex-grow: 0，内容有，与父级flex-grow: 1结合。min-height: 100vh如果您不愿意提供<body> display:flex，请使用包装器，但我可以向您保证它可以跨浏览器工作。
显然，您可以忽略主题。我只是不喜欢你选择的颜色:)
森栏
TA贡献1810条经验 获得超5个赞
试试这个代码：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.navigation {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 4em;
background-color: green;
}
.content {
background-color: darkgrey;
height: 100%;
margin-top: 4em;
}
.footer {
position: absolute;
left: 0;
width: 100%;
height: 3em;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="navigation">
<p>nav works</p>
</div>
<div class="content">
<p>content works</p>
</div>
<div class="footer">
<p>footer works</p>
</div>
</body>
</html>
- 2 回答
- 0 关注
- 93 浏览
添加回答
举报
0/150
提交
取消