html - css 布局显示不正确

Question

我有一个正在尝试布局的应用程序。除了左栏内容外，一切都很好。它应该显示父容器的 100% 高度，与右列的高度相同。

#Container 是外部容器。 #TreeList 是左列。 #Tabcontrol 是右栏。

这是我的应用现在的样子:

这是我应用的当前 CSS:

html {
    font-family: Open Sans, Calibri, Arial;
    margin: 0 auto; 
    width: 1500px;
}

body {

}

#Container {
    float:left;
    width:100%;
    position:relative;
    border:1px solid black;
}

#TreeList {
    position:relative;
    border-bottom: 1px solid #707070;
    border-top: 1px solid #707070;
    border-left: 1px solid #707070;
    float:left; 
    overflow:hidden;
    padding: 20px;

}

#TabControl {
    position:relative;
    border:1px solid #707070;
    overflow:hidden;
    float:left; 
    padding: 20px;
}

Answer 1

height: 100%; 不像某些人预期的那样工作，您需要父元素上的给定高度(em、%、px 等)。在这种情况下，你的 body 我想。将此添加到您的 CSS:

html, body{
    height: 100%;
}

如果您需要灵活的父容器高度，有几种解决方法可以实现:

#1 Flexbox

您可以在这里查看:Flexbox Guide , 工作非常整洁，缺点是 browser support .

#2 绝对定位

给父元素 position: relative; 和你的元素 position: absolute;顶部:0，底部:0； left: 0; 例如。

#3 jQuery 插件:matchHeight

这个插件也可以完成这项工作:matchHeight , 只需要包含 jQuery 和运行 javascript