仅滚动内容 div,其他应修复 [英] Scrolling only content div, others should be fixed
本文介绍了仅滚动内容 div,其他应修复的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有三个 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屋!
查看全文