元素上方的垂直導航欄會變長嗎？
[英]Vertical navbar gets longer when elements are above it?
問題描述
我正在嘗試在頁面左側制作一個垂直導航欄，該導航欄與網站一樣長（即延伸到頁腳）。 但是，只有上面沒有任何東西時，它才是正確的高度-當我添加網站的標題時，導航欄會比該網站長。
body{ padding: 0px; margin: 10px auto 0 auto; font-family: 'corbel','arial'; background: #fff; color: #444; /* text colour */ max-width: 1500px; height: auto; position: relative; } footer{ background: #333; color: #fff; padding: .1em 3em; width: auto; margin-left: 130px; } h1{ text-align: center; font-size: 85px; padding: 10px; margin: auto; margin-top: 10px; } #content{ margin-left: 150px; } /* Navbar */ #navbar{ background-color: #599; list-style-type: none; overflow: hidden; width: 130px; margin: 0px; font-family: 'corbel','arial'; text-align: center; padding-left: 0px; height: 100%; float: left; position: absolute; } #nav_li{ text-align: center; } #nav_a{ text-decoration: none; margin: 10px; display: inline-block; color: white; }
<h1>Website Title</h1> <body> <ul id='navbar'> <li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li> <li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li> <li id='nav_li'><a id='nav_a' href='reviews.html'>Our reviews</a></li> </ul> <div id='nav_fill'> </div> <div id='content'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <footer> <p>Content © Business Name - Website design ©</p> </footer> </body>
非常感謝任何可以提供幫助的人！
2 個解決方案
解決方案1
0 2016-11-17 09:20:37
解決此問題的方法有多種-最簡單的方法是將html, body背景顏色作為CSS的邊欄（ height: 100% ），然后在頂部和底部添加粘性header和footer ，並在其中添加容器元素上的background-color。
像這樣：
* { margin: 0; padding: 0;} html, body { height: 100%; background: blue; } #content { background: white; } h1 { background: white; position: absolute; top: 0; left: 0; right: 0; height: 3em; } #menu { margin-top: 3.5em; float: left; width: 7em; color: white; } #content { background: white; height: 100%; margin: 3em 0 4em 7em; padding-top: 3.5em; } footer { position: fixed; bottom: 0; left: 0; right: 0; height: 4em; background: gray; }
<body> <h1>This is a heading</h1> <ul id="menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <div id="content"> <p>Something goes in here</p> </div> <footer>This is the footer</footer> </body>
解決方案2
0 2016-11-17 09:26:00
嘗試使用position:fixed和min/max-height我也建議使用calc()來計算導航欄的合適大小。 這里你有jsfiddle
減少窗口高度時如何防止頁腳移出上方的元素
[英]How to keep footer from moving out of the way of elements above when the window gets height decreases
當屏幕變小時，如何使導航欄堆棧上的元素相互疊加？
[英]How do I make the elements on my navbar stack on top of one another when the screen gets smaller?
使用垂直導航欄進行水平滾動-向后滾動時導航條下的內容
[英]Horizontal Scrolling with Vertical Navbar - Content under Navbar when scrolling back
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.