HTML如何实现某区域的内容用滚动条看，其它区域都是固定不动的
如图所示，HEADER、导航主菜单、内容标题、FOOTER的位置都是固定的，所有菜单的详细都是在“内容”框里显示，内容多的话就出现滚动条，上下拖动显示内容。求问代码该怎么...
如图所示，HEADER、导航主菜单、内容标题、FOOTER的位置都是固定的，所有菜单的详细都是在“内容”框里显示，内容多的话就出现滚动条，上下拖动显示内容。求问代码该怎么写。
展开
5个回答
展开全部
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：
<div style="width: 100px; height: 100px; overflow: scroll">测试div内容超出用滚动条的内容</div>
3、浏览器运行index.html页面，此时。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你的问题以下代码解决
绝对定位.html 文件代码如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<link href="fixed.css" rel="stylesheet">
</head>
<body>
<header id="headHeader">
<h1>HEADER</h1> <!-- 对应你图片的 HEADER -->
</header>
<article>
<header id="contentHeader">
<h3>内容标题</h3> <!-- 对应你图片的 内容标题 -->
</header>
<div id="content">
内容 <!-- 对应你图片的 内容 -->
</div> <!-- /end #content -->
</article>
<footer>
FOOTER <!-- 对应你图片的 FOOTER -->
</footer>
<aside id="nav"> <!-- 以下开始对应你图片的 导航主菜单 -->
<nav>
<ul>
<li><a href="#">文章</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">文章</a></li>
</ul>
</nav>
</aside> <!-- 以上对应你图片的 导航主菜单 -->
<aside id="AD">
广告位 <!-- 对应你图片右边的白色小框 广告位 -->
</aside>
</body>
</html>
fixed.css 文件代码如下：
body {
background: #fff;
margin: 0 auto;
width: 988px;
}
#headHeader {
position: absolute;
top: 0;
margin: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
padding: 0;
width: 988px;
height: 100px;
text-align: center;
}
article {
position: absolute;
top: 100px;
margin-left: 200px;
border-right: 1px solid rgba(0, 0, 0, 0.5);
width: 718px;
height: 500px;
}
#contentHeader {
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
#content {
margin: 10px;
width: 698px;
height: 400px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid lightgray;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-ms-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
text-align: justify;
overflow: auto;
}
footer {
position: absolute;
top: 600px;
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
padding: 5px 0 0 0;
width: 988px;
height: 30px;
text-align: center;
}
#nav {
position: absolute;
top: 100px;
border-right: 1px solid rgba(0, 0, 0, 0.5);
padding: 20px 0 0 20px;
width: 180px;
height: 480px;
}
#AD {
position: absolute;
top: 100px;
left: 937px;
width: 69px;
height: 500px;
}CSS把网页body部分固定宽度988px，暂时没设定背景颜色，但用边框把各部分分开，内容部分如果出现溢出，会自动出现下拉框。主要使用了绝对定位布局。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用框架做吧，效果更好，网站后台经常都是这种布局
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把内容区域的div的样式中加上OVERFLOW: auto;即可，例如：
<div style='border:0px;padding:3px; PADDING:0px; width:200px; height:480px; LINE-HEIGHT: 20px; OVERFLOW: auto; '></div>
如果内容区域内容超出页面高度，自动会加入滚动条
<div style='border:0px;padding:3px; PADDING:0px; width:200px; height:480px; LINE-HEIGHT: 20px; OVERFLOW: auto; '></div>
如果内容区域内容超出页面高度，自动会加入滚动条
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
比如如下 当高度超过300时就出现滚动条 高度不变 y就是竖方向 x是横方向
div { overflow-y:scroll; height:300px;}
如果想把滚动条弄好看点 那还需要好几条样式 请参考swf文件
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
