CSS位置绝对全宽问题

i have 2 divs and a dl:

我有2个div和一个dl：

<div id="wrap">
 <div id="header">
  <dl id="site_nav_global_primary">

and this is my style:

这是我的风格：

#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}

#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}

#site_nav_global_primary {    
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}

Now i want to change site_nav_global_primary to have a full screen width without changing the wrap and the header. but when i try:

现在我想更改site_nav_global_primary以获得全屏宽度而不更改换行和标题。但是当我尝试：

#site_nav_global_primary {    
position: absolute;
width:100%;
top:0px;
left:0px;
}

The navigaation gets the 100% of the wrapper which is max 1003px width. i want it to stretch to the maximum without changing the wrap and header divs.

导航获得100％的包装，最大宽度为1003px。我希望它在不改变换行和标题div的情况下伸展到最大值。

Is this possible?

这可能吗？

5 个解决方案

#1

180

You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)

您可以将left和right属性都设置为0.这将使div拉伸到文档宽度，但要求不放置父元素（不是这种情况，因为#header是position：relative;）

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

Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header

演示：http：//jsfiddle.net/xWnq2/，我删除了位置：relative;来自#header

#2

You need to add position:relative to #wrap element.

您需要添加位置：相对于#wrap元素。

When you add this, all child elements will be positioned in this element, not browser window.

添加此元素时，所有子元素都将位于此元素中，而不是浏览器窗口中。

#3

Why would you want it to be wider than it's container? For me, it seems like you should take the dl outside of the containing divs if you don't want it to be bound by their constraints.

你为什么要它比它的容器宽？对我来说，如果您不希望它受到约束的约束，您似乎应该将dl置于包含div之外。

#4

I don't know if this what you want but try to remove overflow: hidden from #wrap

我不知道你想要的是什么，但是试着去除溢出：隐藏在#wrap中

#5

Make #site_nav_global_primary positioned as fixed and set width to 100 % and desired height.

将#site_nav_global_primary定位为固定并将宽度设置为100％和所需高度。

#1

180