61,128
社区成员
发帖
与我相关
我的任务
分享html5+css3响应式页面，在线等
有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。
...全文
请发表友善的回复…
发表回复
yuwanli919293 2015-06-17
- 打赏
- 举报
上下部分采用固定定位position:fixed; 对应的固定在页面的上下两端就行了，，，中间的部分要是想做到在pc和手机上响应式排版的话，，，一是可以采用浮动，。，。，在固定区域内浮动，，，这样在手机上就会因为宽度小而自动往下排了。。。。二是可以做响应式的布局，。，，这里要用到媒体查询。。。如果你对这个不熟悉的话，。。。你可以直接用bootstrap。。。它里面有写好的响应式布局样式。。。对着它的开发文档相应的调用就行了
香蕉猪 2015-06-17
- 打赏
- 举报
直接position...将上下两个div固定在top跟bottom....
JPF1024 2015-06-17
- 打赏
- 举报
简单写了一个,使用了bootstrap.大概效果就是这样了、。
<!DOCTYPE html>
<html xmlns:form="http://www.w3.org/1999/html">
<head lang="en">
<meta charset="UTF-8" />
<title>申请管理</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<header class="page-header" style="position: fixed;z-index: 1;background: red;top: 0;margin:0;width: 100%;">
这里是头部
</header>
<div class="container-fluid" style="margin:50px 0">
<table class="table table-condensed table-hover table-bordered ">
<tbody>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
<tr>
<td>有一个页面</td>
<td>有一个页面</td>
<td>有一个页面</td>
</tr>
</tbody>
</table> 有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。有一个页面，分为上中下三个部分，上下两部分不动，中间是列表，当列表数据多的时候，出现滚动条，滚动的时候，上下两部分也是不动的，要求电脑，平板，手机都兼容，当在手机上显示时，如果数据过多，中间部分可以改变排版。麻烦知道的朋友上一下代码，初学不太会，谢谢了。
</div>
<footer style="position: fixed;z-index: 1;background: red;bottom: 0;width: 100%;">
这是底部文本
</footer>
</body>
</html>
Tggui 2015-06-16
- 打赏
- 举报
写成上下两个浮动起来，中间怎么拉上下都是浮着的
xuxiaomei2707 2015-06-16
- 打赏
- 举报
类似这样的页面，请大神们帮个忙，竖向滚动条在中间部分，或者在网页最外层都可以，
