html - 如何在宽度受限的元素内显示跨越页面宽度的 HTML 元素？

Question

我正在进行的设计要求设计的主体具有 940 像素的固定像素宽度，但顶部和底部边框要延伸超过此边界。

这是显示所需效果的最简单的图像:

假设一些 HTML 是这样的:

<!-- This is the Big Black width restricted box -->
<div class="enclosingBox">
    <div class="topnav">
        Exclusives
        Shop
        The Brand
        Press
        Vault
    </div>

    <div>
        <p>This is some stuff in the middle</p>
        <p>Some Other Stuff in the middle</p>
    </div>

    <div class="bottomnav">
        SHOE PIC 1
        SHOE PIC 2
        SHOE PIC 3
        SHOE PIC 4
    </div>
</div>

顶部导航可以绝对定位，但底部导航的标记需要如何工作？

Answer 1

你的想法是错误的。如果我对您的理解正确的话，获得您想要的布局的最佳方法是将您的页面创建为水平“段”，而不是试图强制进行不自然的叠加。

<div style="width:800px;margin-left:auto;margin-right:auto;">
 ... all the top stuff, 100% wide and smaller
</div>

<div style="width:100%;">
<div style="width:800px;margin-left:auto;margin-right:auto;">
... your nav stuff
</div>
</div>

<div style="width:800px;margin-left:auto;margin-right:auto;">
... you're body ...
</div>

<div style="width:100%;">
<div style="width:800px;margin-left:auto;margin-right:auto;">
... bottom nav stuff
</div>
</div>

<div style="width:800px;margin-left:auto;margin-right:auto;">
... all your feets are belong to div
</div>