gpt4 book ai didi

html - 当 child 位置固定时从 Bootstrap 容器继承宽度

转载 作者:搜寻专家 更新时间:2023-10-31 08:26:30 29 4
gpt4 key购买 nike

我试图让标题 div 从其父级继承其宽度。 header div 是 position: fixed。父级包含在 Bootstrap 容器内。

但是,正如您在我创建的代码中看到的那样,它没有正确地继承其父级的宽度 - 它从某处添加了一些额外的宽度。

这一切都很烦人!知道如何解决这个问题吗?

.category-body {
margin-left: 17% !important;
width: 67%;
background-color: red;
height: 500px;
}
.category-header {
position: fixed;
top: 51px;
width: inherit;
background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="category-body">We are in the category-body
<div class="category-header">We are in the category-header</div>
</div>
</div>

http://plnkr.co/edit/yVk15RqDqAac4H2eDJQe

最佳答案

问题源于在父 width 上使用百分比值。浏览器似乎对此有问题。 (在 Chrome、FF 和 IE11 上测试。)

如果您使用像素值,问题就会消失。

Revise PLUNKR

来自 another answer :

It seems as though the static value (250px) can be propagated through normal inheritance. Whereas when the relative value (90%) is being used, the fixed div has already been taken out-of-flow, and now inheritance-wise, it's parent is the viewport.

在这里了解更多:

关于html - 当 child 位置固定时从 Bootstrap 容器继承宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34161665/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com