Javascript 如何在3个元素上划分一个元素的高度？_Javascript_Html_Css

Javascript 如何在3个元素上划分一个元素的高度？

javascript html css

Javascript 如何在3个元素上划分一个元素的高度？,javascript,html,css,Javascript,Html,Css,我有以下html代码： body，html{ 身高：100%； } .家长{ 宽度：15%；高度：-可使用webkit填充 } .孩子{ 身高：33.33% } 我为“父”尝试了display:table，为“子”尝试了display:table row，但没有成功有可能吗？我建议使用flexbox，不要忘记将.parent设置为高度：100% 使用flexbox的主要优点是：您不必处理溢出问题，假设一行中有更多内容无法容纳整个容器高度的1/3，它将自动扩展该行，并且所有剩余的可用

我有以下html代码：

body，html{
身高：100%；
}
.家长{
宽度：15%；
高度：-可使用webkit填充
}
.孩子{
身高：33.33%
}

我为“父”尝试了

display:table

，为“子”尝试了

display:table row

，但没有成功

有可能吗？

我建议使用flexbox，不要忘记将

.parent

设置为

高度：100%

使用flexbox的主要优点是：

您不必处理溢出问题，假设一行中有更多内容无法容纳整个容器高度的1/3，它将自动扩展该行，并且所有剩余的可用空间仍将均匀分布
您可以轻松地添加或删除一行，而无需更改CSS，它们将根据数字或子div均匀分布
如果需要一行或多行变短或变高，可以使用
```
flex
```
或
```
flex-grow
```
或
```
flex-basis
```
进行相应调整
另外，如果你还没有听说过flexbox，那么一旦你进入flexbox的世界，你会惊讶于它的强大

html，
身体{
身高：100%；
保证金：0；
}
.家长{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.孩子{
弹性：1；
}


1.
2.
3.

应用

高度：100%和边距：0
（重置默认边距）为html
和body
，然后父级为100%高度，子级为33.33%。没有弹性或表需要
最重要的是，家长需要一个定义的高度，才能使孩子的百分比值生效。如果父级高度是一个百分比值，则父级的父级也需要定义的高度。如果只使用百分比，则会上升到body
和html


body，
html{
身高：100%；
保证金：0；
}
.家长{
宽度：15%；
身高：100%；
}
.孩子{
身高：33.33%；
背景：#fa0；
}
.孩子：第一个孩子{
背景：#0fa；
}
.孩子：最后一个孩子{
背景#af0；
}
您的代码正在运行，只需输入最小宽度即可查看其运行情况
<html>
<head>
    <style>
        .parent{
            height:100%;
        }

        .child{
            height:32%;
            border:1px solid black; 
            min-width: 100px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>
</html>


.家长{
身高：100%；
}
.孩子{
身高：32%；
边框：1px纯黑；
最小宽度：100px；
}
32+32+32=96
@Turnip刚放了33.33%，我只是想展示一下如何让高度动态变化。我加了32，因为我加了一个1px的边框，只是为了让你们清楚，高度实际上是working@ShreerajKarki高度：计算（100%/3-2px）then@PatrickRoberts我只是想让代码专家看看，问这个问题的人能说出他想要的高度的百分比。。平静下来。。