仅滚动内容div,其他应该是固定的

Question

我有三个div.我需要修复标题和left_side divs以及滚动内容div.我一直在寻找解决方案,并找到了溢出和位置的东西.但我无法核心使用它.我怎样才能做到这一点？我会感谢各种答案.

  HTML
------
<div id="header">

</div>

<div id="left_side">    
</div>

<div id="content">
</div


CSS
-----
body {   
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0px auto;
    font-family: Calibri, Georgia, Ubuntu-C;  
    font-size: 16px;
    margin-bottom: 20PX
}

#header{
    width: 100%;
    height: 139px;
    background-image: url('images/Header_grey.gif');   
}


#left_side{
    width: 210px;
    height: 700px;
    background-image: url('images/Left_side.gif');
    background-repeat:repeat-y;
    overflow:hidden; 
    position:absolute;
    font-size: 16px;
}

#content{
     height: auto;
     padding: 20px;
     margin-left: 230px;
     margin-right: 20px;
    padding-bottom: 30px
 }

Answer 1

overflow: auto; 需要时添加滚动

#header{
    width: 100%;
    height: 139px;
    background-image: url('images/Header_grey.gif');   
    overflow: hidden;  //code added to prevent scroll
}


#left_side{
    width: 210px;
    height: 700px;
    background-image: url('images/Left_side.gif');
    background-repeat:repeat-y;
    overflow:hidden;  //code added to prevent scroll
    position:absolute;
    font-size: 16px;
}
#content{
     height: auto;
     padding: 20px;
     margin-left: 230px;
     margin-right: 20px;
    padding-bottom: 30px;
    overflow: auto;  //code added
 }

Answer 2

• 首先,您需要为内容区域设置固定高度.
• 然后去overflow:auto那儿

您的代码中的错误::您想要一个div的滚动条,但是您声明div高度为 auto

当高度为自动时,你不能要求滚动条,要有滚动条,你需要为该div设置一个固定的高度,当内容高度大于div高度时,它会自动引入滚动条

注意:所以css中的更改将是

#content{
 height: 300px;/*..very important if you want scroll bar...*/
 overfow:auto; /*..will introduce scroll bar when needed..*/
 padding: 20px;
 margin-left: 230px;
 margin-right: 20px;
padding-bottom: 30px
}

示例:: FIDDLE