关于页面高度问题

关于页面高度问题

老师您好,在.con的css样式中设置height:4000px之后,即使设置了HTML和body宽高为100%,运行页面依旧会出现上下滚动条,是为什么呢?

具体代码如下:

<!DOCTYPE html>

<html>

<head>

<title>sticky</title>

<style type="text/css">

      *{

      margin:0px;

      padding:0px;

      }

      html, body{

      width:100%;

      height:100%;

      }

      .con{

      width:100%;

      height:100%;

      background:url("images/mooc.png") center top no-repeat;


     

      }

      .opacity_{

      width:100%;

      height:100%;

      background:url("images/opacity.png");

      position:fixed;

      top:0px;

      left:0px;

      }

      .login{

        width:360px;

        height:360px;

        background:url("images/login.png")no-repeat;

        position:fixed;

        top:50%;

        left:50%;

        margin-top:-180px;

        margin-left:-180px;


      }

</style>

</head>

<body>

<div class="con"></div>

<div class="opacity_"></div>

<div class="login"></div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2019-08-30 20:02:28

同学你好,

理解的有些问题。即使父元素设置了固定高度,子元素高度大于父元素,那么子元素也会全部显示出来,例如:

http://img1.sycdn.imooc.com//climg/5d6910010001515c02740257.jpg

http://img1.sycdn.imooc.com//climg/5d690fda00012b1208990518.jpg

父元素设置了超出隐藏,子元素才会显示与父元素高度相等,如下:

http://img1.sycdn.imooc.com//climg/5d6910370001b80414320562.jpg

如果没有解决你的疑惑,建议描述清楚一些,便于帮助你解决。

祝学习愉快!

好帮手慕码 2019-08-29 17:15:24

同学你好!

请问是这样的吗,给con设置height: 4000px;会出现滚动条。

http://img1.sycdn.imooc.com//climg/5d6796930001a74002730137.jpg

这个效果是正确的哦,因为body和html的100%是靠子元素撑开的。所以还是会出现纵向滚动条。

如果帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕婉清8375384 #1
    可是子元素的高度只有一个页面,滚动条滚动的时候后面是空白页
    2019-08-30 14:12:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师