gpt4 book ai didi

css - Bootstrap 4 位置固定宽度继承不起作用

转载 作者:行者123 更新时间:2023-11-28 11:20:16 24 4
gpt4 key购买 nike

我有内容和侧边栏:

.border {
border: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-7 col-lg-9 border">
<div class="content">
.....
</div>
</div>
<div class="col-md-5 col-lg-3 border position-relative">
<div class="position-fixed border" style=" width: inherit;">
....
</div>

</div>
</div>

</div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

在此示例中,固定位置元素的宽度不是继承父元素的。为什么?我需要继承父元素的宽度。如果我设置 width: 20% 那么 width 在固定位置上工作,但为什么 width inherit 不起作用?

最佳答案

它工作正常,但您需要注意 position:fixed 具有相对于视口(viewport)的宽度。所以如果给父级设置20%,则固定元素会继承20%,不会继承其父元素宽度的计算像素值。

所以两个元素都有 20% 但它们的百分比引用不同(即它们的包含 block 不同)

The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. ref

 

... However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. ref

这里有一个基本的例子来说明:

.box {
border:2px solid red;
min-height:50px;
width:100%;
}
.box > div {
position:fixed;
width:inherit;
min-height:50px;
border:2px solid green;
left:0;
}

body {
padding:0 100px;
}
<div class="box">
<div></div>
</div>

在下面的示例中,两个元素都具有 width:100%。固定元素具有 100% 的视口(viewport)宽度,而静态元素具有 100%body 宽度减去填充。

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

...

  1. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

  2. If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media. ref


另一件需要注意的事情是你没有在你的代码中设置任何 left 值,这很困惑并且会让你认为固定元素的宽度不正确但你只是有一个溢出。

这里是之前没有left的代码:

.box {
border:2px solid red;
min-height:50px;
width:100%;
}
.box > div {
position:fixed;
width:inherit;
min-height:50px;
border:2px solid green;
}

body {
padding-left:100px;
}
<div class="box">
<div></div>
</div>

我们可能认为fixed元素和static元素的宽度是一样的,其实不然。固定元素溢出。

相关:Why aren't my absolutely-positioned elements located where I expect?

关于css - Bootstrap 4 位置固定宽度继承不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55547010/

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