Question

我有一个用户交互设置，但是flexbox并没有一直向下扩展。正如我们所看到的，我试图垂直分割各部分的25％/ 75％，并且我希望这些部分将剩余的空间向下移动，但它只能达到两个部分中最低的一个。

我尝试了身高：100％，但这似乎不起作用。不知道该怎么办。

#horizontalTake {
    height: 100%;
}

#container {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    flex-direction: row;
}


#side {
    flex: 25%;
    background-color: #f1f1f1;
    justify-content: center;
    padding-top: 35px;
}


#main {

    flex: 75%;
    background-color: #e1e6ed;
    justify-content: center;
}

              <div id = 'horizontalTake'>
                    <div id = "container">
                        <div id = "side">
                            <center>
                                <h3> TestOne </h3>
                            </center>
                        </div>
                        
                        <div id = "main">
                            <center>
                               <h3> TestTwo </h3>
                            </center>

                        </div>

                    </div>
                </div>

Answer 1

而不是使用100％使用100vh，这将占用整个窗口的高度，并且 flex-direction：行；将设置而不是行

#horizontalTake {
  height: 100%;
}

#container {
  display: flex;
  height: 100vh;
  flex-direction: row;
  position: relative;
}

#side {
  flex-shrink: 0;
  flex: 25%;
  background-color: #f1f1f1;
  justify-content: center;
  padding-top: 35px;
}

#main {
  flex-shrink: 0;
  flex: 75%;
  background-color: #e1e6ed;
  justify-content: center;
}

<div id='horizontalTake'>
  <div id="container">
    <div id="side">
      <center>

        <h3> Day Overview </h3>
      </center>
    </div>

    <div id="main">
      <center>
        <h3> Test </h3>
      </center>

    </div>

  </div>
</div>

如何使Flexbox填充高度的100％

1 个答案: