如何使div覆蓋網頁的整個寬度，而不僅僅是視口？

Question

我正在設計一個用於最終項目的網站。 我包括的一件事是導航欄和一個只有紫色背景的div作為標題。

問題是，當窗口小於全屏時，div不會到達末尾。 我如何才能使div即使在調整窗口大小時也能到達頁面的末尾？ 邊距設置得太零。

PS。 我不能使用位置：已修復，因為標頭應該位於頂部，而且我不認為vh或vw會因為我使用的程序太舊而起作用。 （Dreamweaver CS3）

這是代碼：（添加了jsfiddle） https://jsfiddle.net/0x4arjk2/8/

#apDiv5 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100px;
z-index:1;
background-color: #1A001A;
}

謝謝！

Answer 1

標記的問題是，您已經完全定位了所有div，並將它們從元素流中刪除。 絕對定位是指定位到最接近的祖先，而不是定位到視口。 因此，在調整屏幕大小時，絕對定位的topnav傾向於留在其位置，並且其內容在x方向上溢出，因此顯示了水平滾動條。 但是紫色的

width: 100%;

繼承自html標簽，即視口的寬度。 因此，觀察到的效果。

您不應該絕對定位每個div。 假設可以使用彈性盒，那么一種簡單的響應方法就是使用彈性盒。 當達到一定寬度時，它可以自動包裝所有元素，從而使設計更具響應性。 您可以使用以下方法調整此寬度（在發生包裹的下方）

max-width: 100px; //some value

在headerMenu div中。

 html, body { padding: 0; margin: 0; overflow-x: hidden; } ul { list-style: none; } .header { top: 0; left: 0; display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; background-color: #1A001A; } .headerMenu { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 1000px; justify-content: flex-end; align-items: baseline; background-color: #000; } .headerMenu a { color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .headerMenu a:hover { background-color: #ddd; color: black; } .headerMenu a.active { background-color: #FF0000; color: white; }

 <html> <body> <div class="header"> <div> <!--add image/logo here--> <img src="http://via.placeholder.com/100x100" alt="" /> </div> <div class="headerMenu"> <a href="Splash.html">Home</a> <a href="Bio.html">Bio</a> <a href="Gallery.html">Gallery</a> <a class="active" href="upcoming Gigs.html">Upcoming Gigs</a> <a href="songs.html">Song List</a> <a href="Contact.html">Contact</a> <a href="media.html">Media</a> </div> </div> </body> </html>

在此處了解有關CSS flexbox的更多信息

如何使div覆蓋網頁的整個寬度，而不僅僅是視口？

問題描述

1 個解決方案

解決方案1
0 2018-06-19 19:21:28

如何使div覆蓋網頁的整個寬度，而不僅僅是視口？

問題描述

1 個解決方案

解決方案1 0 2018-06-19 19:21:28

解決方案1
0 2018-06-19 19:21:28