Question

我知道这可能听起来像是重复但是我已经检查了很多答案并尝试了许多明显的解决方案，其中没有一个有效，我认为我发布了我的特定（非工作）示例。除此之外，我已经尝试了这个问题的所有答案，但没有成功：

How to make a floated div 100% height of its parent?

我正在尝试（在我之前有很多人尝试过）让两个左浮动的div占据其父级的全部高度，本身设置为100％的高度。

<!DOCTYPE html >
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Div height test</title>
    <link href="divstyles.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="feedback">
        <div class="feedback-column" id="column1">
            <p>This is column 1</p>
            <p>This is column 1</p>
        </div>
        <div class="feedback-column" id="column2">
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
        </div>
    </div>

</body>

</html>

divstyles.css：

.feedback {
    height: 100%;
    background-color: #333333;
}

.feedback-column {
    height: 100%;
    width: 50%;
    float: left;
    display: table-cell;
}

#column1 {
    background-color: #999999;
}

#column2 {
    background-color: #cccccc;
}

在许多其他事情中，我尝试定位外部div相对和绝对内部相对和绝对及其组合。我也试过设置父母显示：flex;效果不大（变化使得外部div与最高的div一样高，但不影响较小的div）。

我已经在任务积压上持续了几个星期，并且间歇性地尝试解决它并暂时放弃。严重有没有办法做到这一点？而且，如果没有，有没有人知道何时使用html和css可以实现这种简单，必要的布局？

Answer 1

如果您将body设为固定高度（例如height: 500px），则代码应该有效。这是因为通常用于指示其父元素高度的两个元素都不是，因为它们是浮动的，因此对其父元素的高度没有影响。

body {
  height: 500px;
}

.feedback {
    height: 100%;
    background-color: #333333;
}

.feedback-column {
    height: 100%;
    width: 50%;
    float: left;
    display: table-cell;
}

#column1 {
    background-color: #999999;
}

#column2 {
    background-color: #cccccc;
}

<!DOCTYPE html >
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Div height test</title>
    <link href="divstyles.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="feedback">
        <div class="feedback-column" id="column1">
            <p>This is column 1</p>
            <p>This is column 1</p>
        </div>
        <div class="feedback-column" id="column2">
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
            <p>This is column 2</p>
        </div>
    </div>

</body>

</html>

Answer 2

在height: 100vh;班级而不是.feedback

上使用height: 100%;

＆＃13;

.feedback {
    height: 100vh;
    background-color: #333333;
}

.feedback-column {
    height: 100%;
    width: 50%;
    float: left;
    display: table-cell;
}

#column1 {
    background-color: #999999;
}

#column2 {
    background-color: #cccccc;
}

＆＃13;

<div class="feedback">
    <div class="feedback-column" id="column1">
        <p>This is column 1</p>
        <p>This is column 1</p>
    </div>
    <div class="feedback-column" id="column2">
        <p>This is column 2</p>
        <p>This is column 2</p>
        <p>This is column 2</p>
        <p>This is column 2</p>
        <p>This is column 2</p>
    </div>
</div>

＆＃13;

希望这就是你要找的东西。

Answer 3

.feedback {
   height: 100%;
   background-color: #333333;
   display: flex;
   align-items: stretch;
}

.feedback-column {
   float: left; /* Why is this needed? */
   display: table-cell; /* Why is this needed? */
   flex-grow: 1;
}

默认情况下，flex-direction是行 - 因此使用align-items: stretch会强制较小的div填充容器的高度。

我不确定你为什么需要这里的float: left;，而浮动元素是一种痛苦。

两个浮点数：左侧div占据非高度指定父级

3 个答案: