Question

此CSS规则无效..

#wrapper{
   height:100%;
   width:100%;
   background-color: aliceblue;
}

包装器不占用页面的整个高度..

Answer 1

如下所示，它可以解决您的问题。

首先，选择您要为任何设备制作100％高度的div，然后应用如下所示的CSS。

.wrapper {
    height: 100vh;
}

要使section或div高度与设备高度相同，您必须使用VH，它的名称为viewport height。

Answer 2

我正在尝试创建一个div，我设置的高度应该与我的页面相同。

height:100%

本身没有任何意义......它必须是某种东西的100％ ..并且这些数字必须可以在父子链上一直计算。

那么包装器能100％完成什么？答案是<body>，它本身就是<html>元素的子元素。

一旦我们设置了它们，它就会起作用，因为你可以在视线高度以外的<html>元素上向上移动链。

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}
#wrapper {
  height: 100%;
  background-color: blue;
}

＆＃13;

<div id="wrapper"></div>

＆＃13;

也就是说，如果内容超出了vireport高度，我会在包装器上使用min-height:100%以允许溢出问题。

＆＃13;

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
#wrapper {
  min-height: 100%;
  background-color: blue;
}

.expander {
  height:1000px;
  }

＆＃13;

<div id="wrapper">
<div class="expander"></div>
</div>

＆＃13;

Answer 3

<!DOCTYPE html>

    <style>
     img.normal {
     height: auto;
     }
     img.big {
     height: 500px;
     }
     p.ex {
     height: 100px;
     width: 100px;
     }
    </style>
    <title></title>
</head>
<body>
    <img class="normal" height="84" src="hari.jpg" width="95"><br>
    <img class="big" height="84" src="hari.jpg" width="95">
    <p class="ex">
        sample
    </p>
</body>

CSS规则不适用于高度100％

3 个答案: