Question

我写了以下代码。我想做一个div＆＃39;显示：flex＆＃39;，并添加两个分区，一个宽度：200px，一个宽度：100％;

＆＃13;

<div style="clear:both;display:flex; height: 100%;">
    <div style="width:400px; background-color: red;
        height:auto;">
    </div>
    <div style="width:100%;
        background-color: black;
        height:auto;">
    </div>
</div>

＆＃13;

但我无法将高度应用于该div，它在开发人员选项中显示0高度。

我已经尝试过清楚：既有风格，又仍无效。

请让我知道正确的语法和代码，我对CSS很困惑。

Answer 1

当您使用auto时，它会获取元素内容的高度。div没有内容，因此获取高度等于0.

您可以使用min-height：

＆＃13;

<div style="clear:both;display:flex; height: 100%;">
    <div style="width:400px; background-color: red;
        min-height:20px;">
    </div>
    <div style="width:100%;
        background-color: black;
        height:auto;">
    </div>
</div>

＆＃13;

如果您想使用auto，则必须为height和html设置body，因为您使用div的百分比并且必须对其进行衡量相对于他的父母。

html,body {
  height:100%;
}

＆＃13;

html,body {
  height: 100%;
}

＆＃13;

  <div style="clear:both;display:flex; height: 100%;">
    <div style="width:400px; background-color: red;
        min-height:auto;">
    </div>
    <div style="width:100%;
        background-color: black;
        height:auto;">
    </div>
</div>

＆＃13;

其他方式是使用单位vh，如下所示：

<div style="width:400px; background-color: red; height:100vh;">

＆＃13;

  <div style="clear:both;display:flex;">
    <div style="width:400px; background-color: red;
        height:100vh;">
    </div>
    <div style="width:100%;
        background-color: black;
        height:auto;">
    </div>
</div>

＆＃13;

Answer 2

首先使用内联样式并不是一个好的想法。它们很难阅读/编辑，很难覆盖。

其次，在父div（具有display：flex的那个）上设置高度100％。 height:100%必须相对于容器的高度。在您的情况下html,body由于您没有任何内容而没有任何高度。

第三，在子div上设置height:auto。 height:auto取决于元素的内容，但您没有任何内容。

我的猜测是你希望父级div的高度为：屏幕的100％。您可以使用视口高度（100vh），也可以将高度100％设置为body，html如下例所示

body,
html {
  height: 100%
}

<div style="clear:both;display:flex; height: 100%;">
  <div style="width:400px; background-color: red;
        height:auto;">
  </div>
  <div style="width:100%;
        background-color: black;
        height:auto;">
  </div>
</div>

Answer 3

如果您想要覆盖所有屏幕，那么您需要将HTML标记高度100％，身高标记高度100％。

<html style="height:100%;">
  <body style="height:100%;">
  <div style="clear:both;display:flex; height: 100%;">
    <div style="width:400px; background-color: red;
        height:auto;">
    </div>
    <div style="width:100%;
        background-color: black;
        height:auto;">
    </div>
</div>
  </body>
</html>

Answer 4

另一种解决方案是使用vh您可以设置height: 100vh而不是height: 100%

height: 100vh;

＆＃13;

<div style="clear:both;display:flex; height: 100%;">
    <div style="width:400px; background-color: red;
        height:100vh;">
    </div>
    <div style="width:100%;
        background-color: black;
        height:width;">
    </div>
</div>

＆＃13;

Answer 5

这可能是由于存在更严格的“heigth”属性，即div在其他标签内。您可以尝试在.css文件中执行该样式。这是HTML5中的更多方法和最佳实践。如果您在新的html文件中尝试使用此代码，则可以看到div具有100％的高度：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="clear:both;display:flex; height: 100%;">
    <div style="width:400px; background-color: red;
        height:auto;">
        Hello 1
    </div>
    <div style="width:100%;
        background-color: black;
        height:auto;">
        Hello 2
    </div>
</div>

</body>
</html>

我无法将样式属性高度应用于div

5 个答案: