我正在嘗試做一個基本的頁面布局，其中導航欄始終可見，頁腳位于頁面底部，兩者之間是內容。如果內容太小，它應該拉伸并將頁腳推到窗口的底部。我有以下代碼，由于某種原因是可滾動的，并且不需要的未使用區(qū)域出現(xiàn)在頁腳之后。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條經(jīng)驗 獲得超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條經(jīng)驗 獲得超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 關注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消