Html 一排带圆形按钮的Flex

我的页面布局是这样的 高度分为三部分：

顶部

，

中部

，

底部

我希望该页面适合设备的高度和宽度100%，因此在高度和宽度上没有滚动条

现在我正在做

#top {
...
height: 10%;
...
}

#middle {
...
height: 80%;
...
}

#bottom {
...
height: 10%;
...
}

这在高度方面非常有效

---

现在我正试图水平分割

底部

部分，使3个元素在图片上显示为绿色-两侧有2个圆圈，中间有一个方形元素

这就是我努力理解如何让它工作的地方，所以我有两个问题：

由于页面的高度将是动态的，

底部将具有
不同的高度。如果高度1000px-底部将
为100px，圆圈应具有
高度：100px；宽度：
100px；边界半径：50%。如果高度是
500px，应该是
高度：50px；宽度：50px；边界半径：
50%;。有没有办法让它充满活力

对于将页面拆分为

顶部

，

中部

，

底部

，我使用 简单的

height

CSS属性，但对于

bottom

行，将其拆分为3 我正在使用flex，因为它看起来更好。还有别的办法吗 比其他人更喜欢？我应该只使用

高度

和

宽度

，还是 我应该对整个页面使用

flex

---

如果使用网格是一种选择，那么下面的工作应该做得很好：

html，
身体{
溢出：隐藏；
保证金：0；
填充：0；
}
.电网{
显示：网格；
网格模板行：10%自动10%；
网格模板列：1fr；
高度：100vh；
宽度：100vw；
}
.标题{
背景：黄色；
}
.包装纸{
背景：红色；
}
.页脚{
背景：蓝色；
显示：网格；
网格模板列：计算（100vh/10）自动计算（100vh/10）；
身高：100%；
}
.页脚.圆圈{
边界半径：50%；
背景：浅灰色；
身高：100%；
宽度：100%；
}
.footer.block{
背景：紫色；
身高：100%；
宽度：100%；
}

---

通过使用display flex，您可以使用：

*{
填充：0；
保证金：0；
}
.柔性容器{
显示器：flex；
弯曲方向：立柱；
柔性包装：nowrap；
}
.标题{
背景色：#4273f8；
宽度：100vw；
高度：10vh；
}
梅因先生{
背景色：#0044ff；
宽度：100vw；
高度：80vh
}
.页脚{
背景色：#4273f8；
宽度：100vw；
高度：10vh；
}
.footer.footer容器{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
宽度：100%；
身高：100%；
}
.向左转{
宽度：5%；
身高：100%；
背景色：#00ff62；
边界半径：50%；
边缘：0.2米；
}
.页脚中心{
宽度：100%；
身高：100%；
背景色：#00ff62；
}
.右转{
宽度：5%；
身高：100%；
背景色：#00ff62；
边界半径：50%；
边缘：0.2米；
}

一排带圆形按钮的Flex

手机上的装置vh断续故障。您可以使用js通过几行简单的代码来解决这个问题

    .my-element {

高度：100vh；/*不支持自定义属性的浏览器的回退*/ 高度：计算值（var（--vh，1vh）*100）； }

设vh=window.innerHeight*0.01； //然后我们将--vh custom属性中的值设置为文档的根 document.documentElement.style.setProperty（'--vh'，

${vh}px

）

这里的细节（教程）

---

我认为如果有人想让高度动态化，那么，与使用100vh相比，最大高度：100%可能是更好的选择。我尝试使用

vh

和

vw

，但在移动浏览器上，我认为它将顶部栏计算为高度，因此我认为，%在我的示例中效果更好，正如@RitambharDas所说的。我现在试试你的解决方案。我总是喜欢用%来表示高度和宽度。但对于高度，您必须使用身体的最大高度，如果您使用%@bambam，它在codepen上与

vh

vw

完美配合，但当我切换到%时，它断开了，我做错了吗（@Arno代码正在根据视口的高度设置列宽（

calc（100vh/10）

）。如果您使用的是

%

，它将根据宽度进行设置。如果您愿意，使用躯干的百分比应该没有问题，但是计算应该从

100vh

vh

开始，并且

vw

在移动设备上不起作用。基本上，在移动设备上，它的工作原理类似于100vh=100%+地址栏高度，因此它是对于我来说，这并不适合设备的高度：（这里有更多的解释，它在移动设备上工作，尝试查看此链接这似乎在移动设备上正常工作！我将添加文章中提到的调整大小侦听器，并尝试一下

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit