CSS位置绝对全宽问题

Question

我有2个div和一个dl:

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

这是我的风格:

#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;
}

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

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

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

这可能吗？

Answer 1

您可以将both left和rightproperty 设置为0.这将使得在div拉伸到文档的宽度,但要求没有父元件被定位(这不是的情况下,看到#header是position: relative;)

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

演示在:http://jsfiddle.net/xWnq2/,在那里我删除position:relative;从#header

Answer 2

您需要添加position:relative到#wrap元素.

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

Answer 3

我有类似的情况。就我而言，它没有具有 position:relative 的父级。只需将我的解决方案粘贴在这里，供可能需要的人使用。

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