以百分比表示的Css高度不起作用[重复]

wpx232ag 于 2023-04-08 发布在其他

关注(0)|答案(8)|浏览(191)

此问题已在此处有答案：

Percentage Height HTML 5/CSS（7个回答）
6年前关闭。
我有以下简单代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>Live Feed</title>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
    I should be tall
  </div>
</body>

</html>

但是div不会显示为100%的高度，为什么？

css

来源：https://stackoverflow.com/questions/8262852/css-height-in-percent-not-working

8条答案

按热度按时间

tjrkku2a1#

你需要在所有的父元素上设置一个100%的高度，在这个例子中是body和html。

html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }

<html><body><div></div></body></html>

赞(0）回复(0）举报 2023-04-08

xqk2d5yq2#

使其为视口高度的100%：

div {
  height: 100vh;
}

适用于所有现代浏览器和IE〉=9，请参阅这里的more info。
在某些移动的浏览器（如Safari）上，地址栏将在滚动时显示/隐藏。要考虑到这一点，请使用svh，lvh或dvh之一（选中browser support）。

赞(0）回复(0）举报 2023-04-08

ac1kyiln3#

height: 100%可以在父元素的大小固定的情况下工作。

赞(0）回复(0）举报 2023-04-08

laik7k3q4#

您可以通过使用定位来实现这一点。
试试看

position: absolute;

才能达到100%的高度

赞(0）回复(0）举报 2023-04-08

ufj5ltwl5#

您需要在父元素上设置100%的高度。

赞(0）回复(0）举报 2023-04-08

8ehkhllq6#

增加身高：100%到身体

body{height:100%}

赞(0）回复(0）举报 2023-04-08

7hiiyaii7#

这就是你在CSS中需要的：

html, body {
    height: 100%; 
    width: 100%; 
    margin: 0; 
}

赞(0）回复(0）举报 2023-04-08

avkwfej48#

如果您想自由使用百分比，根父级必须以像素为单位，

<body style="margin: 0px; width: 1886px; height: 939px;">
<div id="containerA" class="containerA" style="height:65%;width:100%;">
    <div id="containerAinnerDiv" style="position: relative; background-color: aqua;width:70%;height: 80%;left:15%;top:10%;">
       <div style="height: 100%;width: 50%;float: left;"></div>
       <div style="height: 100%;width: 28%;float:left">
            <img src="img/justimage.png" style="max-width:100%;max-height:100%;">
       </div>
       <div style="height: 100%;width: 22%;float: left;"></div>
    </div>
</div>
</body>

赞(0）回复(0）举报 2023-04-08

我来回答

以百分比表示的Css高度不起作用[重复]

8条答案

相关问题

热门标签

最新问答