header&footer不使用fixed

chuzhao1309

于 2015-12-15 17:03:00 发布

阅读量220

点赞数

原文链接：https://my.oschina.net/wefatory/blog/545537

版权

本文详细介绍了如何使用HTML和CSS实现网页的基本布局，包括顶部、主体和底部区域的定位与样式设置。同时，深入探讨了如何通过CSS属性使网页在滚动时隐藏滚动条，保持页面美观的同时提供良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
  <div class='top'>
  </div>
  <div class="main">
    <br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>435345345
  </div>
  <div class="footer"></div>
</body>

body{
  margin: 0;
}
.top{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5em;
  background: #f0f;
}
.main{
  position: absolute;
  top: 1.25em;
  bottom: 1.25em;
  left: 0;
  right: 0;
  background: #114422;
  overflow: auto;
  color: #fff;
  font-size: 2em;
}
.footer{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5em;
  background: #666;
}
::-webkit-scrollbar{
  width: 0;
}

转载于:https://my.oschina.net/wefatory/blog/545537