如何使div在视口内做出响应？

Question

我在div标签中有很多div，如下所示：

#mycontent > div {
  width: 14.28%;
}

<div id="myheader">some header content</div>

<div class="container" id="mycontent">
  <div class="outerdiv" id="row1">
    <div class="cells">Sun</div>
    <div class="cells">Mon</div>
    <div class="cells">Tue</div>
    <div class="cells">Wed</div>
    <div class="cells">Thu</div>
    <div class="cells">Fri</div>
    <div class="cells">Sat</div>
  </div>

  <div class="outerdiv" id="row6">
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
    <div class="cells"></div>
  </div>
</div>

<div id="mydetails">extra contents here</div>

当#myheader在它们下面时，如何设置这种结构的样式以使#mycontent和#mydetails填充原始视口的100％？甚至有可能吗？

Answer 1

我建议您不要使用width: 14.28%。去掉它。如果这样做，则无论其中有多少.outerdiv项都将自动放入div中。

#myheader, 
#mycontent,
.outerdiv {
    width: 100%;
}

.outerdiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.outerdiv > div {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: .75rem;
    text-align: center;
}

Answer 2

.outerdiv {
  display: flex;
  width: 100%;
}

这应该可以解决问题。