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

CSS高度百分比无法正常工作

CSS高度百分比无法正常工作

富国沪深 2019-11-13 15:16:44
我有以下简单的代码:<!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%显示。为什么?
查看完整描述

3 回答

?
万千封印

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

使其成为视口高度的100%:


div {

  height: 100vh;

}

在所有现代浏览器和IE> = 9上均可使用


查看完整回答
反对 回复 2019-11-13
?
慕的地6264312

TA贡献1817条经验 获得超6个赞

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


<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>


查看完整回答
反对 回复 2019-11-13
?
茅侃侃

TA贡献1842条经验 获得超21个赞

您需要在所有父元素上设置100%的高度,在这种情况下,您的正文和HTML都应设置为100%。这个小提琴显示了它的工作原理。


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

div { height: 100%; width: 100%; background: #F52887; }

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


查看完整回答
反对 回复 2019-11-13
  • 3 回答
  • 0 关注
  • 393 浏览
慕课专栏
更多

添加回答

举报

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