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方向上溢出，因此显示了水平滚动条。但是紫色div的

width: 100%;

继承自html标签，即视口的宽度。因此，观察到的效果。

您不应绝对定位每个div。假设可以使用弹性盒，那么一种简单的响应方法就是使用弹性盒。当达到一定宽度时，它可以自动包装所有元素，从而使设计更具响应性。您可以使用

来调整此宽度（在发生换行的下方）

max-width: 100px; //some value

在 headerMenu 分区中的

。

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 here

如何使div覆盖网页的整个宽度，而不仅仅是视口？

1 个答案: