如何创建一个容器，其中divs水平和垂直填充（并在4边有边距）？

Question

这是我能得到的最接近的：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
html,
body,
main {
  height: 100%;
}
body {
  background-color: #413c32;
  color: #444;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}
article[_v-f4d9afa6] {
  margin-bottom: 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
article[_v-e514def2] {
  background-color: #fff;
  height: 50%;
  margin-top: 15px;
  margin-right: 15px;
  /* margin-bottom: 15px; */
  margin-left: 15px;
  /* position: absolute; */
  border-radius: 5px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}
article section[_v-e514def2] {
  margin: 10px;
}

＆＃13;

<main>
  <article _v-f4d9afa6="">
    <article class="modal v-transition" _v-e514def2="">
      <section _v-e514def2="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </section>
    </article>
    <article class="modal v-transition" _v-e514def2="">
      <section _v-e514def2="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </section>
    </article>
  </article>
</main>

＆＃13;

＆＃13;

＆＃13;

但是你可以看到底部边缘丢失了。只有当只有一个面板时，保证金才会保留。

我怎么能这样做，所以无论我有多少个面板，总是有一个底部边缘？ （面板的高度总是达到100％。）

这里是JSFiddle。

Answer 1

问题

这是由于两个子元素（article[_v-e514def2]）的累积高度推动了父级（article[_v-f4d9afa6]）的高度超过了所需的级别。子元素应用margin以及height，这实际上意味着他们占据父母的总高度 50％+ 50％+边距。< / p>

分辨率

要解决此问题，您需要确保总height等于50%。有几种方法可以实现这一目标：

使用calc

使用calc我们可以从margin-top

中删除height

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
html,
body,
main {
  height: 100%;
}
body {
  background-color: #413c32;
  color: #444;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}
article[_v-f4d9afa6] {
  margin-bottom: 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
article[_v-e514def2] {
  background-color: #fff;
  height: calc(50% - 15px);
  margin-top: 15px;
  margin-right: 15px;
  /* margin-bottom: 15px; */
  margin-left: 15px;
  /* position: absolute; */
  border-radius: 5px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}
article section[_v-e514def2] {
  margin: 10px;
}

＆＃13;

<main>
  <article _v-f4d9afa6="">
    <article class="modal v-transition" _v-e514def2="">
      <section _v-e514def2="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </section>
    </article>
    <article class="modal v-transition" _v-e514def2="">
      <section _v-e514def2="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </section>
    </article>
  </article>
</main>

＆＃13;

＆＃13;

＆＃13;

使用flexbox

使用flexbox模型会告诉子元素自动增长到合适的height以适合父级：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
html,
body,
main {
  height: 100%;
}
body {
  background-color: #413c32;
  color: #444;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}
article[_v-f4d9afa6] {
  margin-bottom: 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
   flex-direction: column;
}
article[_v-e514def2] {
  background-color: #fff;
  height: 50%;
  margin-top: 15px;
  margin-right: 15px;
  /* margin-bottom: 15px; */
  margin-left: 15px;
  /* position: absolute; */
  border-radius: 5px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}
article section[_v-e514def2] {
  margin: 10px;
}

＆＃13;

<main>
  <article _v-f4d9afa6="">
    <article class="modal v-transition" _v-e514def2="">
      <section _v-e514def2="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </section>
    </article>
    <article class="modal v-transition" _v-e514def2="">
      <section _v-e514def2="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </section>
    </article>
  </article>
</main>

＆＃13;

＆＃13;

＆＃13;