Question

我有一些div（1个容器，里面有1个content-div和1个sidebar-div），我使用float:right将我的侧边栏放在右边，然后我添加了position: fixed，所以它有效，我添加了top:0和right:0。我的内容有overflow:auto，但在我将position:fixed添加到我的侧边栏后，它停止了工作。

以下是代码：

代码：

#parent {
  margin: 0 auto;
}
#sidebar {
  position: fixed;
  float: right;
  width: 20%;
  top: 0px;
  right: 0px;
}
#content {
  overflow: hidden;
  height: 1000px;
}

<div id="parent">
  <div id="sidebar">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

我正在寻找一个简单的解决方案，编码更少，并且（如果可能的话）只有css和html（如果它不起作用，我会使用javascript）。

我在这里有一个小提琴：https://jsfiddle.net/qo1crv3x/3/

Answer 1

#sidebar {
  display:inline-block;
  width: 20%;
  position:fixed;

}

#content {
  display:inline-block;
  height: 1000px;
  width:80%;
}

还有一种带引导程序的方法，我前几天就用过了，可以在这里找到。 http://www.bootply.com/dMZgESVmaj

Answer 2

我想这会解决你的问题，请参阅fidle here

#parent {
  margin: 0 auto;
  width: 100%;
}

#sidebar {
  position: fixed;
  float: right;
  width: 20%;
  right: 0;
}

#content {
  float: left;
  width: 80%;
}

HTML / CSS：使用固定位置溢出并向右浮动

2 个答案: