时间戳

首页 > 解决方案 > 子 div 在 flex box 属性中存在高度问题

html - 子 div 在 flex box 属性中存在高度问题

问题描述

我一直遇到divflex 容器的 child 占据了它们所在容器的全部高度的问题。我尝试过继承高度和百分比，但它不起作用。理想情况下，我会选择这种格式。

这是我到目前为止的代码。

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  background: url(images/raindrops.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.content-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 70vh;
  background-color: cyan;
}

.row {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.side {
  height: inherit;
  flex: 10%;
  background-color: #2B1426;
}

ul {
  position: relative;
  justify-content: center;
}

.side li {
  font-size: 1.7rem;
  list-style-type: none;
  color: white;
  padding-top: 50px;
}

.main {
  flex: 85%;
  flex-direction: column;
  height: inherit;
}

.city-selector {
  display: flex;
  flex: 25%;
  background-color: grey;
  padding: 20px;
}

.row-2 {
  flex: 75%;
  display: flex;
  flex-wrap: wrap;
}

.current-city {
  flex: 25%;
  background-color: lightblue;
}

.forecast {
  flex: 75%;
  background-color: lightyellow;
}
<div class="content-container">
  <div class="row">
    <div class="side">
      <ul>
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-map-marker-alt"></i></li>
        <li><i class="fas fa-bars"></i></li>
        <li><i class="fas fa-cloud"></i></li>
        <li><i class="fas fa-cog"></i></li>
      </ul>
    </div>
    <div class="main">
      <div class="city-selector">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
      </div>
      <div class="row-2">
        <div class="current-city">
          <h1> current city</h1>
        </div>
        <div class="forecast">
          <h1> forecast</h1>
        </div>
      </div>
    </div>
  </div>
</div>

任何帮助将不胜感激！

标签： htmlcssflexboxbox-sizing

解决方案

使用 Heightheight: 25%而不是flex: 25%forcity-selector和row-2选择器flex: 75%to height: 75%。height: 100%为html,body and containers. _

请参阅下面的代码片段。

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: url(images/raindrops.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  height: 100%;
}

.content-container {
  background-color: cyan;
  height: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.side {
  flex: 10%;
  background-color: #2B1426;
}

ul {
  position: relative;
  justify-content: center;
}

.side li {
  font-size: 1.7rem;
  list-style-type: none;
  color: white;
  padding-top: 50px;
}

.main {
  flex: 90%;
  flex-direction: column;
}

.city-selector {
  display: flex;
  height: 25%;
  background-color: grey;
  padding: 20px;
}

.row-2 {
  height: 75%;
  display: flex;
  flex-wrap: wrap;
}

.current-city {
  flex: 25%;
  background-color: lightblue;
}

.forecast {
  flex: 75%;
  background-color: lightyellow;
}
<div class="content-container">
  <div class="row">
    <div class="side">
      <ul>
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-map-marker-alt"></i></li>
        <li><i class="fas fa-bars"></i></li>
        <li><i class="fas fa-cloud"></i></li>
        <li><i class="fas fa-cog"></i></li>
      </ul>
    </div>
    <div class="main">
      <div class="city-selector">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
      </div>
      <div class="row-2">
        <div class="current-city">
          <h1> current city</h1>
        </div>
        <div class="forecast">
          <h1> forecast</h1>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读