为了账号安全,请及时绑定邮箱和手机立即绑定

顶部和顶部fixed,滚动浏览器滚动条,主体内容显示不全并出现空白区域?

顶部和顶部fixed,滚动浏览器滚动条,主体内容显示不全并出现空白区域?

努力奔跑的自己 2018-08-26 12:02:49
如图:问题描述:如何实现在给主体内容添加滚动条的情况下,滚动浏览器滚动条主体内容显示正常,并且不会出现如图的空白区域。代码如下:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style>        body{            margin: 0;            padding: 0;            color: #fff;        }        .container{            width: 800px;            height: 1000px;            background: #4c77f2;            margin: 0 auto;            padding-top: 40px;            text-align: center;padding-bottom:100px;        }        .header{            width:800px;            position: fixed;            height: 40px;            background: #414141;            text-align: center;            font-size: 16px;            line-height: 40px;            left:50%;            transform:translateX(-50%);        }        .footer-div{            height: 100px;            line-height:100px;            width: 800px;            position:fixed;            bottom:0;        }        .footer{            height:inherit;            width:inherit;            background: #333;            text-align: center;            font-size: 16px;            position:inherit;            left:50%;            transform:translateX(-50%);        }    </style></head><body><div><div class="header">这是页面头部</div><div class="container">这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容</div><footer class="footer-div"><div class="footer">这是页面底部</div></footer></div>    </body></html>
查看完整描述

1 回答

?
慢l慢

TA贡献22条经验 获得超3个赞

把.container里的height: 1000px; 改成height: 100%;  亲测有效。

查看完整回答
反对 回复 2018-08-28
  • 努力奔跑的自己
    努力奔跑的自己
    不行的,你把文字减少成一行你就看出缺失的效果了
  • 慢l慢
    慢l慢
    html,body,body>div { height: 100%; box-sizing: border-box; } * { box-sizing: inherit; } .container { min-height: 100%; } 亲亲亲亲亲测!
  • 1 回答
  • 0 关注
  • 1813 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信