html - 只滚动内容div,其他的应该是固定的

标签 html css scroll overflow css-position

我有三个 div。我需要固定 header 和 left_side div 并滚动内容 div。我一直在寻找解决方案,并找到了具有溢出位置 的内容。但是我不能正确地使用它。我怎样才能做到这一点?我将感谢每一种答案。

Picture

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
}
<div id="header">
</div>

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

<div id="content">
</div>

最佳答案

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 */
}

关于html - 只滚动内容div,其他的应该是固定的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17954181/

相关文章:

javascript - 当ImageData不可用时如何提供正确的数据?

css - IE9 是否不允许复选框(单选)输入周围有 0px 的边距?

html - Bootstrap 表行偏移量

jquery - 悬停时水平滚动不顺畅

javascript - 根据滚动更改进度条值

javascript - 滚动到 div 中的元素

javascript - 使用对话框的大小调整多选列表的大小

javascript - 如何从 html 文档将项目添加到共享点列表?

html - 中心 float 列表

javascript - jQuery 动画分几步?