Bootstrap 4位置固定宽度继承不起作用 [英] Bootstrap 4 position fixed with width inherit not working
问题描述
我有内容和侧边栏:
.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>
在此示例中，位置固定的元素的宽度不是父元素的继承.为什么?我需要获得父元素的继承宽度.如果我将宽度设置为20％，则宽度在固定位置上有效，但是为什么宽度继承不起作用?
In this example width of element position-fixed is not inherit of parent element. Why? I need get inherit width of parent element. If I set width: 20% then width is working on position fixed, but why width inherit is not working?
推荐答案
它工作正常，但是您需要注意，position:fixed具有相对于视口的宽度.因此，如果将20%设置为父元素，则固定元素将继承20%，而不会继承其父元素宽度的计算像素值.
It's working fine but you need to note that position:fixed has its width relative to the viewport. So if you set 20% to the parent, the fixed element will inherit 20% and will not inherit the calculated pixel value of its parent element width.
因此，两个元素都将具有20%，但它们的百分比引用都不相同(即，并非两个元素都具有相同的包含块)
So both element will have 20% but not both of them have the same reference for the percentage (i.e. not both of them have the same containing block)
Inherit CSS关键字使指定的元素从其父元素中获取属性的计算值. 参考
...但是，对于某些属性(百分比相对于可能需要布局确定的属性而言，例如width，margin-right，text-indent和top)，百分比-指定的值将转换为百分比计算的值. 参考
... 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
这是一个基本的例子来说明:
Here is a basic example to illustrate:
.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％的视口宽度，而静态元素具有100%的body宽度减去填充.
In the below example, both element are having width:100%. The fixed element is having 100% width of the viewport while the static element is having 100% of the body width minus padding.
有时会相对于某个矩形(称为元素的包含块)来计算元素框的位置和大小.元素的包含块定义如下:
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:
...
-
对于其他元素，如果元素的位置为相对"或静态"，则包含的块由最近的块容器祖先框的内容边缘形成.
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.
如果元素具有位置:固定"，则在连续媒体的情况下由视口建立包含块，在分页媒体的情况下由页面区域建立包含块. 参考
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值，并且会让您认为固定元素的宽度不正确，但是您只是在溢出.
Another thing to note is that you are not setting any left value in your code which is confusing and will make your think the width of the fixed element isn't correct but you are simply having an overflow.
以下是不遗余力的先前代码:
Here is the pervious code without 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>
我们可能认为固定元素的宽度与静态元素的宽度相同，但没有.固定元素溢出.
We may think that the fixed element has the same width as the static one, but no. The fixed element is overflowing.
这篇关于Bootstrap 4位置固定宽度继承不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
