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

您可以将left和right属性设置为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;

Answer 4

将以下 CSS 添加到父 div 对我有用

position: relative;
max-width: 100%

Answer 5

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

Answer 6

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

之外

Answer 7

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

Answer 8

此答案应该可以解决您的问题。如果父div需要相对定位，则宽度为100％的子元素（具有绝对定位）将按预期工作。

https://stackoverflow.com/a/58242149/11679888

CSS位置绝对全宽问题

8 个答案: