Html 不能'；t对齐页脚（底部）、左侧和内容面板（并排固定高度）

我正在尝试将两个div（左侧，内容面板）并排对齐到固定高度，然后在其下方对齐页脚。我的css固定高度属性60%似乎被忽略了

这是我的密码：

<div class="parent">
    <!-- Header starts-->
    <div class="header">
    Header
    </div>
    <!-- Header ends-->
    <!-- Left panel starts-->
    <div class="leftPanel">
    Left panel
    </div>
    <!-- Left panel -->
    <!-- Login panel starts-->
    <div class="contentPanel">
    </div>
    <!-- Login panel -->
    <!-- Footer starts -->
    <div class="footer">
    This is footer
    </div>
    <!-- Footer ends -->
</div>

这就是我得到的：

这就是我想要的：

---

任何帮助都将不胜感激。谢谢。

将左侧面板和内容放入容器中，并将其设置为块。所以你有：

<div class="header">
    // Header
</div>
<div class="container">
    <div class="leftPanel">
        // Left panel
    </div>
    <div class="contentPanel">
        // Content
    </div>
</div>
<div class="footer">
    // Footer content
</div>

---

将左侧面板和内容放入容器中，并将其设置为块。所以你有：

<div class="header">
    // Header
</div>
<div class="container">
    <div class="leftPanel">
        // Left panel
    </div>
    <div class="contentPanel">
        // Content
    </div>
</div>
<div class="footer">
    // Footer content
</div>

---

百分比在高度方面效果不太好，所以请尝试使用px或em

而且，没有“位置：内联块

你可能会说：

• 显示：内联块

及

• 位置：相对位置

---

而且，您需要在页脚的左边放上clear，或者在页脚的正上方插入一个clear的div。

百分比在高度上不起作用，所以请尝试使用px或em

而且，没有“位置：内联块

你可能会说：

• 显示：内联块

及

• 位置：相对位置

---

而且，您需要在页脚上放置clear:left，或者在页脚的正上方插入一个清除的div。

您正在使用

页脚上的
top
属性，该属性仅在具有绝对或相对定位元素时才起作用。然而，这不是问题所在

您可以对
.leftPanel
说它应该占高度的60%，但由于父级没有声明高度，因此它只占它所需的空间

解决方案是为
.parent
以及
body
和
html
标记添加高度

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
.parent {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 100%;
}

您还需要向页脚添加一个
clear:both
，同时页脚前面的元素浮动

也请检查此项。
您正在使用
.footer
上的
top
属性，该属性仅在具有绝对或相对定位元素时有效。然而，这不是问题所在

您可以对
.leftPanel
说它应该占高度的60%，但由于父级没有声明高度，因此它只占它所需的空间

解决方案是为
.parent
以及
body
和
html
标记添加高度

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
.parent {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 100%;
}

您还需要向页脚添加一个
clear:both
，同时页脚前面的元素浮动

同时检查此项。
您混淆了
位置
和
显示
属性。有效的
位置
值是像
绝对
，
相对
，
固定
，等等。而有效的
显示
属性是像
块
，
内联块
，
表
，等等。即使我将位置更改为相对，但它似乎并没有按照我们想要的方式进行调整；我只是想让你知道，你上面提到的属性不会起任何作用，因为它们不是这些属性的正确值。这就像尝试将香蕉用作电话。百分比高度基于包含块的高度。您将
位置
和
显示
属性混为一谈。有效的
位置
值是像
绝对
，
相对
，
固定
，等等。而有效的
显示
属性是像
块
，
内联块
，
表
，等等。即使我将位置更改为相对，但它似乎并没有按照我们想要的方式进行调整；我只是想让你知道，你上面提到的属性不会起任何作用，因为它们不是这些属性的正确值。这就像试图将香蕉用作电话一样。百分比高度基于包含块的高度。百分比在高度中“不起作用”的原因是它们需要其父元素或包含块具有显式（非百分比）高度，正如@LinkinTED在其回答中所说。原因百分比“不起作用”在heights中，它们需要其父元素或包含块具有显式（非百分比）高度，正如@LinkinTED在其答案中所说的那样。