CSS位置绝对全宽问题 [英] CSS position absolute full width problem

问题描述

我有2个div和一个dl：

i have 2 divs and a 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更改为没有
更改wrap和标题。但是当我尝试：

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 {    
position: absolute;
width:100%;
top:0px;
left:0px;
}

导航获取100％的包装器，最大宽度为1003px。

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.

这是可能的吗？

推荐答案

您可以将 left 和 code> 0 。这将使div扩展到文档宽度，但要求没有父元素被放置（这不是这样，看到 #header 是 position：relative; ）

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

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

演示： http://jsfiddle.net/xWnq2/ ，其中我从<$ c $中删除了 position：relative; c> #header

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

这篇关于CSS位置绝对全宽问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！