CSS 位置绝对和全宽问题

我有两个 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 _ 置换为全屏宽度改变包装和标题。但当我尝试:

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

导航获得100% 的包装，这是最大的1003px 宽度。我希望它拉伸到最大值而不改变包装和标题 div。

这可能吗？

html
css

209548 次浏览

小开

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

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

小开

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

小开

最佳答案

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

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

小开

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

小开

I have similar situation. In my case, it doesn't have a parent with position:relative. Just paste my solution here for those that might need.

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

小开

Adding the following CSS to parent div worked for me

position: relative;
max-width: 100%

小开

This one also works. With this method, there is no need to interfere with positioning of parent divs. I have checked

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