<!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中出現(xiàn)滾輪?猛铅?