Flex 连续排列圆形按钮

Question

我的页面布局是这样的高度分为3块：top、middle、bottom

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

现在我在做

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

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

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

这很完美height-wise

现在我尝试水平拆分 bottom 部分，使 3 个元素在图片上显示为绿色 - 两侧有 2 个圆圈，中间有一个方形元素

这就是我努力了解如何让它发挥作用的地方，所以我有 2 个问题：

由于页面高度是动态的，bottom 不同的高度。如果高度为 1000px - 底部将为 100px，圆圈应该有 height: 100px; width: 100px; border-radius: 50%;。如果身高是 500px，应该是height: 50px; width: 50px; border-radius: 50%;。有没有办法让它动态化？
为了将页面拆分为 top、middle、bottom，我正在使用简单 height CSS 属性，但对于 bottom 行拆分为 3 我正在使用 flex，因为这似乎更好。还有什么办法比其他人更喜欢？我应该只使用 heigth 和 width，还是我应该对整个页面使用 flex 吗？

Answer 1

如果可以选择使用网格，下面的内容应该可以很好地完成工作：

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-rows: 10% auto 10%;
  grid-template-columns: 1fr;
  height: 100vh;
  width: 100vw;
}

.header {
  background: yellow;
}

.wrapper {
  background: red;
}

.footer {
  background: blue;
  display: grid;
  grid-template-columns: calc(100vh / 10) auto calc(100vh / 10);
  
  height: 100%;
}

.footer .circle {
  border-radius: 50%;
  background: lightgray;
  height: 100%;
  width: 100%;
}

.footer .block {
  background: purple;
  height: 100%;
  width: 100%;
}

<div class="grid">
  <div class="header">

  </div>
  <div class="wrapper">

  </div>
  <div class="footer">
    <div>
      <div class="circle">&nbsp;</div>
    </div>
    <div>
      <div class="block">&nbsp;</div>
    </div>
    <div>
      <div class="circle">&nbsp;</div>
    </div>
  </div>
</div>

Answer 2

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

*{
    padding: 0;
    margin: 0;
}

.flex-container{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.header{
    background-color: #4273f8;
    width: 100vw;
    height: 10vh;
}

.main{
    background-color: #0044ff;
    width: 100vw;
    height: 80vh
}

.footer{
    background-color: #4273f8;
    width: 100vw;
    height: 10vh;
}

.footer .footer-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.circle-left{
    width: 5%;
    height: 100%;
    background-color: #00ff62;
    border-radius: 50%;
    margin: 0 .2em;
}

.footer-center{
    width: 100%;
    height: 100%;
    background-color: #00ff62;
}

.circle-right{
    width: 5%;
    height: 100%;
    background-color: #00ff62;
    border-radius: 50%;
    margin: 0 .2em;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Flex with round buttons in a row</title>
</head>
<body>
    <div class="flex-container">
        <header class="header">
            
        </header>
        <main class="main">

        </main>
        <footer class="footer">
            <div class="footer-container">
                <div class="circle-left">

                </div>
                <div class="footer-center">

                </div>
                <div class="circle-right">
                    
                </div>
            </div>
        </footer>
    </div>
</body>
</html>

Answer 3

vh 单元在移动设备上仍然存在问题。简单几行就可以用js解决问题

    .my-element {

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

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

令 vh = window.innerHeight * 0.01； // 然后我们将 --vh custom 属性中的值设置为文档的根目录 document.documentElement.style.setProperty('--vh', ${vh}px);

详情在这里（教程） enter link description here

Flex 连续排列圆形按钮

Flex with round buttons in a row

html

css

button

responsive