CSS位置绝对值和全角问题

4jb9z9bj 于 2023-02-26 发布在其他

关注(0)|答案(7)|浏览(133)

我想更改下面的<dl id="site_nav_global_primary">，使其占据整个屏幕宽度，而不更改wrap和包含它的header元素。
当我尝试定位<dl>元素（参见/* problematic code */部分）时，导航得到了最大宽度为1003px的 Package 器的100%。我希望它能在不改变 Package 器和头div的情况下伸展到最大。

#wrap {
    margin:0 auto;
    width:100%;
    min-width:760px;
    max-width:1003px;
    overflow:hidden;
    background-color: lightgray; /* for illustrative purposes */
}

#header {
    width:100%;
    position: relative;
    float:left;
    padding-top:18px;
    margin-bottom:29px;
    background-color: rebeccapurple; /* for illustrative purposes */
}

#site_nav_global_primary {    
    float:right;
    margin-right:18px;
    margin-bottom:11px;
    margin-left:18px;
    background-color: salmon; /* for illustrative purposes */
}

/* Problematic code */
#site_nav_global_primary {    
    position: absolute;
    width:100%;
    top:0px;
    left:0px;
}

<div id="wrap">
    <div id="header">
        <dl id="site_nav_global_primary">Lorem Ipsum</dl>
    </div>
<div>

这可能吗？

css

来源：https://stackoverflow.com/questions/6625116/css-position-absolute-and-full-width-problem

7条答案

按热度按时间

px9o7tmv1#

您可以将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;

赞(0）回复(0）举报 2023-02-26

idfiyjo82#

您需要将position:relative添加到#wrap元素中。
添加此元素时，所有子元素都将定位在此元素中，而不是浏览器窗口中。

赞(0）回复(0）举报 2023-02-26

2skhul333#

我有类似的情况。在我的情况下，它没有一个父位置：相对。只是粘贴我的解决方案在这里为那些可能需要。

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

赞(0）回复(0）举报 2023-02-26

zpqajqem4#

向父级div添加以下CSS对我很有效

position: relative;
max-width: 100%

赞(0）回复(0）举报 2023-02-26

6yt4nkrj5#

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

赞(0）回复(0）举报 2023-02-26

dsf9zpds6#

这个也行，这个方法不需要干扰父div的定位，我查过了

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

赞(0）回复(0）举报 2023-02-26

vktxenjb7#

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

赞(0）回复(0）举报 2023-02-26

我来回答

CSS位置绝对值和全角问题

7条答案

相关问题

热门标签

最新问答