Question

我打算创建一个布局，其中一个DIV是使用Bootstrap修复的。然而，DIV正在产生不良影响。

JSFIDDLE：http://jsfiddle.net/cstoq3ec/

这是HTML

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="simple">
        This is just a plain block
      </div>
    </div>
    <div class="col-6">
      <div class="simple">
        This is just a plain block
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <div class="fixed">
        hey
      </div>
    </div>
    <div class="col-6">
      <p class="scroll">
        This is the scrollable section.
      </p>
    </div>
  </div>
</div>

CSS：

.fixed {
  position: fixed;
  width: 100%;
  background-color: red;
  color: #fff;
  box-sizing: border-box;
}
.scroll {
  height: 1000px;
  background-color: grey;
  color: #fff;
}
.simple {
  background-color: grey;
  color: #fff;
  margin: 15px 0;
}

注意红色DIV如何一直延伸到右侧！我希望它能保持在DIV范围内。我该怎么办？

Answer 1

你不能。这就是为什么你有position:absolute。

在元素上使用position:fixed后，您可以完全从HTML流中获取它，因此无论父母的内容和大小如何都无关紧要。您使用了width:100%，因此它的窗口宽度为100％。

您是否想知道为什么它会受到父级填充（左边距和上边距）的影响，这是因为您还没有设置任何＆＃34;左，上，下或右值＆＃34;和现代浏览器根据父级自动设置值。使用您自己的值进行检查，如您所见： FIDDLE

.fixed {
  position: fixed;
  width: 100%;
  background-color: red;
  color: #fff;
  box-sizing: border-box;
  top:0;
  left:0;
}

哪个，顺便说一句，在我看来你永远不应该依赖，因为你可能在某些浏览器中遇到意想不到的问题。一旦你使用绝对或固定位置，高度推荐至少设置＆＃34;顶部和左边的值＆＃34;。

如果您需要与您的父级相同宽度的固定元素，我将使用javascript / Jquery，因此您可以计算父级的宽度，然后将该值用于固定元素。

使用position：fixed时无法创建布局

1 个答案: