具有100%高度和显示的div:网格不会做我期望的
我所需的布局是HTML主体中具有50%高度(50vh)和宽度的箱体中心,具有两个相等宽度的列,并且如果内容在任一列变得比它自己的高度大,一个垂直滚动条被显示。具有100%高度和显示的div:网格不会做我期望的
我有以下的fiddle。 display: grid
div中的左列有ID #col1
。我注意到的是,如果我将它的高度设置为100%
,那么它的高度将会增长以适合其中的文本。
我不明白为什么。我在说#gridContainer
的父母#flexContainer
的身高为100%
。所以不应该给#col1
一个高度100%
它是否匹配它的父母#gridContainer
?
我注意到,如果我在#gridContainer
选择改变display: grid
到display: block
,我将获得垂直滚动条我是否会#col1
的height: 100%
规则与否。
这是关于如何与css网格与我没有得到的高度CSS属性交互?
你已经设定了50%的父母高度,在此之下,你的col1有50%的身高。 所以你的CSS
#col1 {
overflow: scroll;
width: 100%;
//height: 100%;
background-color: red;
}
你的部门有50%的高度,你已经使用overflow:scroll
所以每当相比于母公司的内容大小铁道部增加超过50%,则滚动条appers。这一切都在这里。
如果你想第二个是相同的只是使用'''overflow:scroll' ''看看这个:https://jsfiddle.net/mxubxpn7/ –
是的,但取消了高度:100%。如果你做的滚动条没有出现。那是我感到困惑的。 –
正在使用'''height:200px;'''。我认为该div是全身100%可能有一些原因,因为你已经使用flex所以它只是开箱 –
那么你想要做什么? –
我说我想要的第一段。我可以在#col1中省去100%的高度,这似乎具有我想要的效果,但我不知道为什么这会起作用。所以我想知道发生了什么事。 –
所以你想知道滚动部分是如何完成的?在第一个列...我是对的 –