三列布局的问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
       body{margin: 0;padding:0;}
       header{position: fixed;top:0; height: 100px;width: 100%;background-color: #ddd;overflow: auto;}
       main{position: absolute;top:100px;bottom:100px;overflow: auto; }
       .content{height: 1000px;}
       footer{position: fixed;bottom: 0;height: 100px;width: 100%;background-color: #ddd;}
    </style>
</head>
<body>
    <header>Header</header>
    <main><div class="content"> Main content</div></main>
    <footer>Footer</footer>
</body>
</html>```
Q1:上面代码会导致这个奇怪的问题,什么情况??

![](http://upload-images.jianshu.io/upload_images/316258-5c004d5191f699ba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
body{margin: 0;padding:0;}
header{position: fixed;top:0; height: 100px;width: 100%;background-color: #ddd;overflow: auto;}
main{position: absolute;top:100px;bottom:100px;overflow: auto;height: 1000px;}
footer{position: fixed;bottom: 0;height: 100px;width: 100%;background-color: #ddd;}
</style>
</head>
<body>
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>
</body>
</html>```
Q2:上面代码使main的滚轮贯穿header和footer,如何使其只在main中出现滚轮??

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,870评论 25 708
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,497评论 0 17
  • 星期天小哼和小哈约在一起玩桌游,他们正在玩一个非常古怪的扑克游戏——“小猫钓鱼”。游戏的规则是这样的:将一副扑克牌...
    青葱烈马阅读 1,530评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,841评论 18 139
  • “我不是天生的王者,但是骨子里留着一股不服输的血液”。你说出这样的话时候,没有想到你会输给时间吧?时间可以吞噬...
    麻天喜阅读 645评论 4 11