Question

所以我试图进入HTML等并且只是玩弄并解决了这个问题：我想要做的是创建一个标题div，其大小为5％高度和100％宽度，左边是div其余高度为95％。

应该在左边的div，效果很好，但如果我不添加任何元素，上面的那个就是空的，当我添加Elements时，div只会得到高度元素。

我希望两个Div都具有他们所拥有的尺寸：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing</title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0 auto;
        }

        #header
        {
            height 10%;
            width: 100%;
            background-color: green;

        }

        #menu
        {

            height: 100%;
            width: 10%;
            background-color: royalblue;

        }

        a
        {
            width: 500px;
        }
    </style>
</head>
<body>

    <div id="header">
        Hey
    </div>

    <div id="menu">

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

Answer 1

您不能使用身高if the parent does not have an explicit height的百分比。在您的情况下，由于// ECMASCRIPT 6 ARROW FUNCTION var fn = () => { console.log('this is', this); return true; } // ECMASCRIPT 5 ARROW FUNCTION BEHAVIOUR var fn = function() { console.log('this is', this); return true; }.bind(this);标记设置为窗口的高度，因此它会有所不同，不能用作父级。

如答案所述：

要设置百分比高度，其父元素（*）必须具有显式高度。这是相当不言而喻的，因为如果你将高度保留为自动，则该块将采用其内容的高度...但是如果内容本身具有以您所做的父级百分比表示的高度你自己有点Catch 22.浏览器放弃并只使用内容高度。

而且，就像this answer所说的那样，

块元素的高度默认为块内容的高度。

简单地说，我认为你不能用纯CSS做到这一点。

但是，您可以使用jQuery执行此操作：

<body>

如果你的HTML是这样的话：

var set = function() {
    var height = $("#container").height();
    var fivePercent = $(window).height() * 0.05;
    var ninetyFivePercent = $(window).height() * 0.95;
    $("#div1").height(fivePercent);
    $("#div2").height(ninetyFivePercent);
};

Answer 2

当涉及百分比时，高度与宽度的工作方式不同，主要是因为如果div是正文中的顶级元素，它没有参考点。屏幕的宽度是给定的。但是，使用高度，浏览器是否需要占用屏幕或html文档的高度？我想这是因为大多数网站传统上下滚动而不是左右滚动。如果你想设置一个高度，你最好使用像素。如果您想要固定div的高度而不是使用包含div更改，请使用overflow:hidden;

Answer 3

尝试创建最小高度

 #header
        {
         min-height: 10%;
            height: 10%;
            width: 100%;
            background-color: green;

        }

Answer 4

你有正确的方法，但你的CSS规则height: 10%中有一个拼写错误（缺少:），这打破了你的CSS渲染。

它基本上有效。关键概念是height: 100%;和html元素都有body，你就做对了（大多数人第一次都不会这样做）。< / p>

或者，您也可以使用viewport-percentage lenths vh，见：https://developer.mozilla.org/en-US/docs/Web/CSS/length

＆＃13;

html, body {
  height: 100%;
}
body {
  margin: 0;
}
#header {
  height: 10%; /* compare to your original snippet */
  width: 100%;
  background-color: green;
}
#menu {
  height: 90%;
  width: 10%;
  background-color: royalblue;
}

＆＃13;

<div id="header">
  Hey
</div>
<div id="menu">
  Hay
</div>

＆＃13;

2个div中的第一个为空

4 个答案: