Question

我正在设计一种设计，要求设计主体的固定像素宽度为940px，但顶部和底部边框要超过此边界。

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

Example of desired effect

假设有些像这样的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

这样的事情看起来非常接近。

http://jsfiddle.net/Fq32a/2/

html, body { width: 100%; position: relative; }

.topnav {
    position: absolute; 
    top: 100px; 
    height: 75px;
    left: 0px; 
    right: 0px;
    border: 1px dotted gray;
    text-align: center;
}

.bottomnav {
    position: absolute; 
    bottom: 20px; 
    height: 50px;
    left: 0px; 
    right: 0px;
    border: 1px dotted gray;
    text-align: center;
}

Answer 2

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

<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>

Answer 3

喜欢这个吗？

<div id="navigation">
   this is the navigation with 100% width.
</div>
<div id="width940">
  this is the container with 940px width
</div>

<!-- the css -->
#navigation {
  width:100%;
  position:absolute;
  top:50px;
  height:32px;
}
#width940 {
  width:940px;
  margin:0 auto;
}

Answer 4

您可能想要查看溢出属性。你可以找到关于w3的文档。但是，使用绝对定位发布的答案是好的。它在处理旧版浏览器时变得非常古怪，所以你必须从试验和错误的基础上解决问题。我不是css大师，但我知道一些事情。理论上的绝对定位应该有效，但是，我提到的方法和绝对定位方法都存在问题，特别是当它包含在内时。

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

4 个答案: