<!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：上面代码会导致这个奇怪的问题，什么情况？？
<!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中出现滚轮？？
网友评论