无法对齐页脚（底部），左侧和内容面板（并排固定高度）

Question

我正在尝试将两个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>

CSS：

.parent {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
.header {
    background-color:red;
    height:20%;
    text-align:center;
}
.contentPanel {
    background-color:green;
    height:60%;
    float:left;
    position:relative;
    width:70%;
}
.leftPanel {
    background-color:#FF00FF;
    height:60%;
    float:left;
    position:relative;
    width:30%;
    top:20%;
}
.footer {
    background-color:orange;
    height:20%;
    top: 80%;
    width:100%;
}
.clear {
    clear:both;
}

这就是我得到的： http://jsfiddle.net/sas/yn1p468u/4/

这就是我想要的：

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

Answer 1

您在top上使用.footer属性，只有在您拥有绝对或相对定位元素时才会有效。但是，这就是问题所在。

你＆＃34;说＆＃34;到.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，而前面的元素会浮动。

同时检查此demo。

Answer 2

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

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

CSS：

.header, .container, .footer {display:block;width:100%;}
.leftPanel, .contentPanel {display:inline-block;vertical-align:top;}
.leftPanel {width:30%;}
.contentPanel {width:70%;}

Answer 3

百分比在高处不起作用，因此请尝试使用px或em。

此外，没有“position：inline-block;”这样的东西。

你可能想要的是：

• display：inline-block;

和

• 职位：亲属;

并且，您需要清除：在页脚上留下，或在页脚正上方插入一个清除的div。