zoukankan      html  css  js  c++  java
  • html设置 hight100%问题

    Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。
    但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。
    父元素没有设定固定高度,于是子元素的高度height: 100% 也不会起作用。

    例如:

      <style>
        .container{
          width: 100%;
          height: 100%;
          background: gold;
        }
      </style>
    <body>
      <div class="container"></div>
    </body>

    如果想让一个元素的百分比高度height: 100%;起作用,你需要给这个元素的所有父元素的高度设定一个有效值。

    现在现在你给了这个div的高度为100%,它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用,你必须设定<body>和<html>的高度 !!!

      <style>
        body,html{
          width: 100%;
          height: 100%;
        }
        .container{
          width: 100%;
          height: 100%;
          background: gold;
        }
      </style>
    <body>
      <div class="container"></div>
    </body>
  • 相关阅读:
    CF1172F
    CF506E
    【清华集训2014】玛里苟斯
    CF516E Drazil and His Happy Friends
    [NOI2017]游戏(2-SAT)
    [bzoj2878][Noi2012]迷失游乐园(基环树dp)
    bzoj3545/bzoj3551 [ONTAK2010]Peaks/Peaks加强版
    [bzoj1791][ioi2008]Island 岛屿(基环树、树的直径)
    [AT2306]Rearranging(拓扑序)
    [bzoj5301][Cqoi2018]异或序列
  • 原文地址:https://www.cnblogs.com/zjx304/p/9883232.html
Copyright © 2011-2022 走看看