如何设置家长班的身高?
如果我降低父级div的高度,则应将子级div设置为父级div。
可能的副本将父Div扩展为孩子的身高
如果父级设置了固定的height,则可以将height:100%用于子级。它不适用于min-height
#child-div{
height: 100%;
}
否则,您可以尝试使用表格布局来增加div
您可以使用最小高度来进行绝对定位:stackoverflow.com/a/40970800/2397550
赞成餐桌解决方案...我喜欢!
只需设置#child-div属性height: 100%:
#parent-div {
height:1000px;
}
#child-div {
height:100%;
background-color:red;
}
解决方案1.使用特定高度
只需为孩子增加100%的身高,它就会起作用(因为这100%是相对于其父对象的身高)。
工作的CSS:
#parent-div {
height: 300px;
}
#child-div {
background: #808080;
height: 100%;
}
使用以下HTML:
这是一个工作示例:http://codepen.io/anon/pen/ZBxbKM
解决方案2.使用最小高度
如果希望父项的高度与内容一起增长,则应使用min-height。不幸的是,min-height没有明确指定高度。这对于孩子来说是正确的:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
来源:父母内部的孩子,最小身高100%,不继承身高
这意味着孩子"认为"父母没有身高,因此100%为0(或内容高度)。由于您没有明确指定高度(根据上面的定义),因此应使用绝对定位进行此工作。
工作的CSS:
* {
width: 100%;
position: absolute;
}
#parent-div {
min-height: 300px;
}
#child-div {
background: #808080;
height: 100%;
}
使用以下HTML:
这是一个工作示例:http://codepen.io/anon/pen/LbdVmX
您可以按百分比设置子节点的width和height的值,然后它会根据父div中的更改而改变。
#parent-div{
width:200px;
/*height:200px;*/
background-color:red;
}
#child-div{
width:100%;
height:100%;
margin:auto;
background-color:red;
}
如果我理解正确,那么您是否要为父母和孩子的身高定型?如果是这样,您可以只添加一个容器div并设置样式,使其成为容器中您设置的高度。