Question

我有内容和侧边栏：

.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％，则宽度在固定位置上有效，但是为什么宽度继承不起作用？

Answer 1

它工作正常，但您需要注意position:fixed的宽度相对于视口。因此，如果将20%设置为父元素，则固定元素将继承20%，而不会继承其父元素宽度的计算像素值。

因此，两个元素都将具有20%，但并非两个元素都具有相同的百分比引用（即，两个元素都没有相同的包含块）

Inherit CSS关键字使指定元素的元素从其父元素中获取属性的计算值。 ^ref



...但是，对于某些属性（百分比相对于可能需要布局确定的属性而言，例如width，margin-right，text-indent和{{1 }}），百分比指定的值将转换为百分比计算的值。 ^ref

这里是一个基本的例子来说明：

top

.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>。固定元素的视口宽度为100％，而静态元素的宽度为width:100%的{{1}}减去填充。

有时会相对于某个矩形（称为元素的包含块）来计算元素框的位置和大小。元素的包含块定义如下：

...



对于其他元素，如果元素的位置为“相对”或“静态”，则包含的块由最近的块容器祖先框的内容边缘形成。



如果元素具有“ position：fixed”，则在连续媒体的情况下由视口建立包含块，在分页媒体的情况下由页面区域建立包含块。 ^ref

要注意的另一件事是，您没有在代码中设置任何100%值，这会造成混淆，并使您认为固定元素的宽度不正确，而只是发生溢出。 / p>

以下是不包含代码的先前代码：

body

left

我们可能认为固定元素的宽度与静态元素的宽度相同，但是没有。固定元素溢出。

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

Answer 2

对我来说，我计算了想要固定的col的百分比，然后按宽度百分比将其设置为css 例如，如果要固定元素为col-md-2 这意味着您需要将css中的宽度设置为2/12 = 16％！像这样

.fixedelement{width:16% !important;}

固定宽度的Bootstrap 4位置继承无效

2 个答案: