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

debugcn 发表于 Dev

安德鲁·Python

我div的flex容器的子容器占用了其所在容器的全部高度时遇到了问题。我尝试继承高度和百分比，但它不起作用。理想情况下，我要使用这种格式。

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

* {
  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>

任何帮助将不胜感激！

巴拉塔米日

使用高度height: 25%，而不是flex: 25%对city-selector和row-2选择flex: 75%来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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。