仅滚动内容 div，其他应修复 [英] Scrolling only content div, others should be fixed

问题描述

我有三个 div.我需要固定 header 和 left_side div，滚动内容 div.我一直在寻找解决方案，并发现了overflow 和position 的问题.但我不能正确使用它.我怎样才能做到这一点?我会很感激每一种答案.

body {宽度:100%；高度:自动；填充:0；边距:0px 自动；字体系列:Calibri、Georgia、Ubuntu-C；字体大小:16px；保证金底部:20PX}#标题{宽度:100%；高度:139px；背景图片:url('图片/Header_grey.gif');}#左边 {宽度:210px；高度:700px；背景图片:url('图片/Left_side.gif');背景重复:重复-y;溢出:隐藏；位置:绝对；字体大小:16px；}#内容 {高度:自动；填充:20px；左边距:230px；右边距:20px；填充底部:30px}

<div id="left_side">

<div id="内容">

解决方案

overflow: auto; 需要时添加滚动

#header{宽度:100%；高度:139px；背景图片:url('图片/Header_grey.gif');溢出:隐藏；/* 添加代码以防止滚动 */}#左边{宽度:210px；高度:700px；背景图片:url('图片/Left_side.gif');背景重复:重复-y;溢出:隐藏；/* 添加代码以防止滚动 */位置:绝对；字体大小:16px；}#内容{高度:自动；填充:20px；左边距:230px；右边距:20px；填充底部:30px；溢出:自动；/* 添加代码 */}

I have three divs. I need header and left_side divs to be fixed and content div to scroll. I've been searching for solution and found something with overflow and position. But I can not use it corectly. How can I do this? I will be thankfull for every kind of answer.

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; adds the scroll when need

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

这篇关于仅滚动内容 div，其他应修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！