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; top: 0, bottom: 0; left: 0;。

＃3 jQuery插件：matchHeight

此插件也可以完成这项工作：matchHeight，只需要包含jQuery并运行javascript

Answer 2

向左列添加100％的高度。

 #TreeList { height:100% }

Answer 3

您尚未在css文档中设置任何library(dplyr) df1 %>% group_by(Firm, Date) %>% mutate(NextTime= lead(as.character(Time), default='16:30')) ，因此所有高度都非常随机。首先设置height＆amp;的主要高度。 body然后html就像这样：

container

然后是你的其他元素：

html, body {
    height: 100%;
}

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

或者，如果您愿意，可以将#TreeList { position:relative; border-bottom: 1px solid #707070; border-top: 1px solid #707070; border-left: 1px solid #707070; float:left; overflow:hidden; padding: 20px; height:100%; } #TabControl { position:relative; border:1px solid #707070; overflow:hidden; float:left; padding: 20px; height: 100%; } 用于您的子元素并执行以下操作：

position: absolute;

这将使元素延伸到整个屏幕并保持你选择的宽度。

这应该有效，但我强烈建议您使用Javascript来设置child { position: absolute; top: 0px; left: 0px; bottom: 0px; width: 100px; } 以及body而不是position: absolute;的高度;