HTML如何实现某区域的内容用滚动条看,其它区域都是固定不动的
发布网友
发布时间：2022-04-25 05:09
共6个回答
懂视网
时间：2022-05-11 11:34
局部出现滚动条,这样就不会破坏整体的样式和布局了.
范例代码:
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>html页面内加横向滚动条</title>
</head>
<body>
<DIV style=" OVERFLOW-X: scroll; scrollbar-face-color:#B3DDF7;scrollbar-shadow-color:#B3DDF7;scrollbar-highlight-color:#B3DDF7;scrollbar-3dlight-color:#EBEBE4;scrollbar-darkshadow-color:#EBEBE4;scrollbar-track-color:#F4F4F0;scrollbar-arrow-color:#000000; width:752px;HEIGHT: 380px" align=center>
<table width="1440" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>p</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>pppppppppppppppppp</td>
<td>ppppppppppppp</td>
<td>ppppppppppppppppppp</td>
<td>ppppppppppppppppppppppppppppppp</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
拷贝上面代码到 文本文档, 修改文本后缀名,txt 为 .html 预览效果
热心网友
时间：2022-05-11 08:42
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：
<div style="width: 100px; height: 100px; overflow: scroll">测试div内容超出用滚动条的内容</div>
3、浏览器运行index.html页面，此时。
热心网友
时间：2022-05-11 10:00
你的问题以下代码解决
绝对定位.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，暂时没设定背景颜色，但用边框把各部分分开，内容部分如果出现溢出，会自动出现下拉框。主要使用了绝对定位布局。
热心网友
时间：2022-05-11 11:35
热心网友
时间：2022-05-11 13:26
<div style='border:0px;padding:3px; PADDING:0px; width:200px; height:480px; LINE-HEIGHT: 20px; OVERFLOW: auto; '></div>
如果内容区域内容超出页面高度，自动会加入滚动条
热心网友
时间：2022-05-11 15:34
比如如下 当高度超过300时就出现滚动条 高度不变 y就是竖方向 x是横方向
div { overflow-y:scroll; height:300px;}
如果想把滚动条弄好看点 那还需要好几条样式 请参考swf文件
