CSS绝对定位和全宽度问题

Question

我想要将下面的<dl id="site_nav_global_primary">元素占满整个屏幕宽度，但不更改包含它的wrap和header元素。当我尝试定位<dl>元素时（请参见/* problematic code */部分），导航栏会占用包含它的最大宽度为1003px的wrapper 100％的宽度。我希望它能够最大限度地伸展，而不更改wrap和header divs。

#wrap {
    margin:0 auto;
    width:100%;
    min-width:760px;
    max-width:1003px;
    overflow:hidden;
    background-color: lightgray; /* for illustrative purposes */
}

#header {
    width:100%;
    position: relative;
    float:left;
    padding-top:18px;
    margin-bottom:29px;
    background-color: rebeccapurple; /* for illustrative purposes */
}

#site_nav_global_primary {    
    float:right;
    margin-right:18px;
    margin-bottom:11px;
    margin-left:18px;
    background-color: salmon; /* for illustrative purposes */
}

/* Problematic code */
#site_nav_global_primary {    
    position: absolute;
    width:100%;
    top:0px;
    left:0px;
}

<div id="wrap">
    <div id="header">
        <dl id="site_nav_global_primary">Lorem Ipsum</dl>
    </div>
<div>

这是可能的吗？

- Tom

---

为什么你想让它比容器更宽？对我来说，如果你不想被它们的限制约束，似乎应该将dl放在包含div之外。 - DoctorMick

Answer 1

你可以将left和right属性都设置为0。这将使

元素延伸到文档的宽度，但需要注意不要对任何父元素进行定位（因为#header已经被设置为position: relative;）。

#site_nav_global_primary {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

示例可在 http://jsfiddle.net/xWnq2/ 查看，我从 #header 中移除了 position:relative;。

- xec

---

只是一个旁注，左右也可以接受负值，请参见：http://jsfiddle.net/xWnq2/1/，但需要父元素没有设置overflow: hidden; - 这样做不会让您轻松地将其拉伸到“最大”。 - xec

如果您正在寻找父元素的宽度，那么这个解决方案和第二个解决方案的混合对我很有用。 - Akshay patil.

Answer 2

你需要在 #wrap 元素中添加 position:relative 属性。

添加该属性后，所有子元素将相对于此元素进行定位，而不是相对于浏览器窗口。

- Andrzej Ośmiałowski

---

尝试过了，不起作用...仍然得到最大1003像素的100%。 - Tom

@Tom 有任何边距、内边距或边框吗？ - Andrzej Ośmiałowski

我尝试了混合使用left:0，right:0的顶部解决方案和父级相对定位，并成功实现了预期结果。 - Akshay patil.

Answer 3

我有类似的情况。在我的情况下，它没有相对定位的父元素。这里只是贴出我的解决方案，供需要的人参考。

position: fixed;
left: 0;
right: 0;

- Sem

---

这只是重复了xec在2011年所接受的解决方案。 - TylerH

Answer 4

将以下 CSS 添加到父级 div 中对我有用：

position: relative;
max-width: 100%

- Tushar

---

这似乎重复了Andrzej在2011年的解决方案。 - TylerH

Answer 5

这个也可以。使用这种方法，无需干扰父div的定位。我已经检查过了。

#site_nav_global_primary {    
  position: absolute;
  width: 100vw;
}

- Pankaj

---

这并不是最糟糕的想法，“width: 100vw”将强制元素与视口一样宽。然而，由于“overflow: hidden”，并且主要内容居中 - 它不会被放置在文档的左边缘，而是溢出到右侧并被隐藏。 - xec

Answer 6

将代码 #site_nav_global_primary 设置为固定定位，宽度设置为100%，并设定所需高度。

- Prabhat Tiwari

Answer 7

我不确定这是否是您想要的，但请尝试从＃wrap中删除overflow：hidden

- Sylwia

---

我复制了你的代码，在FX中运行并从#wrap中删除溢出，它可以正常工作。 - Sylwia