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

【问题标题】：I am not able to apply style attribute height to div我无法将样式属性高度应用于 div
【发布时间】：2018-05-24 17:02:55
【问题描述】：

我已经编写了以下代码。我想创建一个 div 'display: flex'，并添加两个分区，一个宽度：200px，一个宽度：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>

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

我已经尝试清楚：两种风格，但仍然无法正常工作。

请告诉我正确的语法和代码，我对 CSS 很困惑。

【问题讨论】：

你的 div 没有任何内容，所以使用 height:auto;高度结果 0px。你可以阅读这个guide或者在网上搜索你会发现很多关于css的教程

标签： html css flexbox

【解决方案1】：

当你使用auto时，它得到元素内内容的高度。div没有内容，所以得到高度等于0。

你可以使用min-height:

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

如果你想使用auto，你必须为html和body设置height，因为你对div使用百分比，它必须相对于他的父母来衡量。

html,body {
  height:100%;
}

html,body {
  height: 100%;
}

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

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

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

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

【讨论】：

【解决方案2】：

这可能是因为有一个更严格的“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>

【讨论】：

【解决方案3】：

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

height: 100vh;

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

【讨论】：

【解决方案4】：

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

其次，您在父 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>

【讨论】：

【解决方案5】：

如果你想覆盖整个屏幕，那么你需要给你的 HTML 标签高度 100% 和高度 100% 给 body 标签。

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

【讨论】：