Question

enter image description here

粉色div的内容应该是滚动的，我的#scroll_screen的overflow-y设置为auto。不确定为什么它在jsfiddle中没有按预期运行。

有任何想法，明显的错误？谢谢！

HTML

<body>
  <h4>content in pink box should scroll</h2>
  <div id="container">
  <div id="sidebar"></div>
  <div id="content">
    <div id="scroll_screen">

      <div class="scroll_box">
          Scroll Box 1 | Copy 1 {stuff 1}
      </div>

      <div class="scroll_box">
          Scroll Box 2 | Copy 2 {stuff 2}
      </div>

      <div class="scroll_box">
          Scroll Box 3 | Copy 3 {stuff 3}
      </div>

      <div class="scroll_box">
          Scroll Box 4 | Copy 4 {stuff 4}
      </div>

      <div class="scroll_box">
          Scroll Box 5 | Copy 5 {stuff 5}
      </div>

    </div>
  </div>
</div>
</body>

CSS

#content {
    float: right;
    width: 79%;
    //height: auto;
    background: #f8f8f8;
}

#scroll_screen {
    overflow-y: auto;
    //overflow-y: scroll;
    background: pink;
}

.scroll_box {
    margin-bottom: 20px;
    width: 300px;
    height: 45px;
    color: white;
    background: red;
}

Answer 1

使用overflow: auto，而不是overflow: hidden，#container。{/ p>

jsFiddle example

#container {
  overflow: auto;
  margin: 20px 20px 0 0;
  width: auto;
  height: 200px;
  background: #ccc;
  border: 1px solid #666;
}

Answer 2

在#content中你应该把overflow-y：scoll或auto东西放进去您的.scroll_box宽度应为％，否则您将获得一个水平滚动条溢出-y不应该在容器中......然后侧边栏将沿着向上滚动如果你想要它，另一个答案是正确的

http://jsfiddle.net/7Awzz/

#content {
float: right;
width: 79%;
height: 100%;
background: #f8f8f8;
overflow-y: auto; 
}


#scroll_screen { 
}

.scroll_box {
margin-bottom: 20px;
width: 100%;
height: 45px;
color: white;
background: red;
}

为什么包含的div不滚动？

2 个答案: