HTML/CSS Div 没有继续下去

Question

我正在尝试制作一个带有静态侧边栏和可滚动文本的网站。我真的找不到我的 content-divider 没有一直向下的原因。我还想知道固定 content-divider 还是在最底部继续它是更好的做法。查看页面如何不适合灰色分隔线

到目前为止，这是我的代码：

HTML:

<div id="content">
    <div id="sidebar">
        <p>This is sidebar</p>
    </div>      
    <div id="page">
        <p>This is page</p>
        ...
    </div>
</div>

CSS:

#content {
    height: 100%;
    background-color: lightgrey;
    background-attachment: fixed;   /* THIS DOES NOT WORK */
    margin: auto;
    width: 80%;
}
#sidebar {  
    margin-top: 10%;
    text-align: right;
    position: fixed;
    bottom: 0;
    float: left;
    width: 34%;
    height: 70%;
}
#page {
    float: right;
    width: 54%;
}

P.S。我设法通过将 overflow: auto; 添加到 page-divider 来解决这个问题，但我真的不喜欢页面上有那个滚动条。

Answer 1

我想在您的 CSS 中您也有 html,body {height:100%} 并且通过将 height:100% 定义为您将其内容限制为浏览器大小的内容，因此背景不会继续，您将有溢出。使用 min-height 而不是高度。您还使用了浮动，因此您需要使用 overflow:auto

清除它

html,body {
  height: 100%;
}

#content {
  min-height:100%;
  overflow:auto;
  background-color: lightgrey;
  margin: auto;
  width: 80%;
}

#sidebar {
  margin-top: 10%;
  text-align: right;
  position: fixed;
  bottom: 0;
  float: left;
  width: 34%;
  height: 70%;
}

#page {
  float: right;
  width: 54%;
}

<div id="content">
  <div id="sidebar">
    <p>This is sidebar</p>
  </div>
  <div id="page">
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    ...
  </div>
</div>

Answer 2

我认为您应该使用 min-height 而不是 height 来获得适合内容的灵活高度，如下所示：

#content {
min-height: 1000px;
}

我就是这样工作的，每次你应该尝试的时候它都会对我有用。

HTML/CSS Div 没有继续下去

HTML/CSS Div does not continue all way down

html

css

scroll

background-color

fixed