Div 位置固定在另一个 div 内

Question

我正在尝试将 div 的位置设置为：固定在另一个 div 内并紧挨着另一个

<div class="container">

 <div class="fixeddiv"></div>
 <div class="contentdiv"></div>

</div>

我的容器 div 的宽度为 1300px，应该在 paeg 的中间（边距自动）固定 div 应位于容器内的左侧，但在滚动阅读内容底部时不应移动 div

我试过 position: fixed 但它总是在左侧而不是在页面中间。

为了说明我的喜好，我制作了这张照片：

请问我如何完成这项工作。我的想法偏离固定位置并尝试用 javascript 解决它，但我想在没有 js 的情况下做到这一点。

Answer 1

如果我理解正确，请尝试这样的操作。

应用 position: fixed 会使 DIV 脱离文档的正常流程，右栏将最终堆叠在左（固定）栏下方。您可以将右列向右浮动以解决此问题，或者您可以在右列的左侧添加适当的边距。

HTML

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

.wrapper {
    width: 500px;
    margin: 0 auto;
}
.left,
.right {
    color: white;
}
.left {
    background-color: blue;
    min-height: 250px;
    position: fixed;
    width: 50px;
}
.right {
    background-color: red;
    float: right; /* or replace float with: margin-left: 100px */
    min-height: 1000px;
    width: 400px;
}

在下面的小提琴中，我修改了容器和列宽以更好地说明 jsFiddle 内部。

jsFiddle: http://jsfiddle.net/uvawqtfh/ - 浮动版本

jsFiddle: http://jsfiddle.net/uvawqtfh/1/ - 左边距版本

Answer 2

如果你想让 fixed div 设置全高 top:0 bottom:0 和 overflow-y:scroll 如果你想让它滚动
对于内容 div 只需将 margin-left 设置得比 fixed div 多一点，以便它留下一些 space

* {
  margin: 0;
  padding: 0;
}
.container {
  margin: 0 auto;
  width: 400px;
  border: 1px solid red;
}
.fixeddiv {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100px;
  background: blue;
  overflow-y: scroll;
}
.contentdiv {
  margin: 0 0 0 120px;
  border:2px solid green;
}

<div class="container">
  <div class="fixeddiv">
    <h1>fixed div</h1>

    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
  </div>
  <div class="contentdiv">
    <h1>width auto content</h1>

    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
    <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
  </div>
</div>

Div 位置固定在另一个 div 内

Div with position fixed inside another div

css

position

fixed