CSS位置绝对和全宽问题答案

【问题标题】：CSS position absolute and full width problemCSS位置绝对和全宽问题
【发布时间】：2023-03-13 15:28:01
【问题描述】：

我有 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% 的包装器，最大宽度为 1003 像素。我想要它在不更改换行和标题 div 的情况下拉伸到最大值。

这可能吗？

【问题讨论】：

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

标签： html css

【解决方案1】：

您可以将left 和right 属性都设置为0。这将使 div 拉伸到文档宽度，但要求不定位父元素（事实并非如此，因为 #header 是 position: relative;）

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

演示地址：http://jsfiddle.net/xWnq2/，我从 #header 中删除了 position:relative;

【讨论】：

只是一个旁注，左右也接受负值，见：jsfiddle.net/xWnq2/1 但要求父母不要有溢出：隐藏； - 但是，这不会让您轻松地将其拉伸到“最大”
呃，这终于解决了我奇怪的ie11 问题，即绝对和固定 div 使自己的宽度为 3k 像素...
如果您正在寻找父元素的宽度，那么这个和第二种解决方案的混合对我有用。

【解决方案2】：

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

当你添加这个时，所有子元素都将定位在这个元素中，而不是浏览器窗口中。

【讨论】：

试过了，没用.. 仍然得到最大 1003px 的 100%
@Tom 任何边距、内边距、边框？
我已经尝试过混合使用 left:0 、 right:0 和父位置相对的顶级解决方案，并且能够达到预期的结果

【解决方案3】：

我也有类似的情况。就我而言，它没有具有位置的父级：相对。只需将我的解决方案粘贴到此处以供可能需要的人使用。

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

【讨论】：

【解决方案4】：

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

position: relative;
max-width: 100%

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我不知道这是不是你想要的，但尝试删除溢出：隐藏在#wrap中

【讨论】：

我复制了你的代码，运行 i FX remove overflow from #wrap 就可以了