Html CSS位置绝对全宽问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6625116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS position absolute full width problem
提问by Tom
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?
这可能吗？
回答by xec
You could set both leftand rightproperty 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 #headeris 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/，我position:relative;从那里删除#header
回答by Andrzej O?mia?owski
You need to add position:relativeto #wrap element.
您需要添加position:relative到#wrap 元素。
When you add this, all child elements will be positioned in this element, not browser window.
添加此内容时，所有子元素都将定位在此元素中，而不是浏览器窗口中。
回答by Sem
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:relative 的父级。只需将我的解决方案粘贴在这里，供可能需要的人使用。
position: fixed;
left: 0;
right: 0;
position: fixed;
left: 0;
right: 0;
回答by SummmerFort
This answer should solve your problem. It the parent div needs to have relative positioning then the child element (with absolute positioning) with width 100% will work as expected.
这个答案应该可以解决您的问题。如果父 div 需要具有相对定位，那么宽度为 100% 的子元素（具有绝对定位）将按预期工作。
回答by Prabhat Tiwari
Make #site_nav_global_primarypositioned as fixed and set width to 100 % and desired height.
使#site_nav_global_primary定位为固定并将宽度设置为 100% 和所需的高度。
回答by Sylwia
I don't know if this what you want but try to remove overflow: hidden from #wrap
我不知道这是否是您想要的，但尝试删除溢出：从 #wrap 中隐藏
回答by DoctorMick
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 受到其约束的约束，似乎您应该将 dl 放在包含的 div 之外。
