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

Question

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

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

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

但是如您所见，底部边距丢失了。仅当只有一个面板时才会保留边距。

无论我有多少面板，我怎样才能做到始终有底部边距？（面板的高度总和为 100%。）

这是 JSFiddle。

Answer 1

问题

这是由于两个子元素 (article[_v-e514def2]) 的累积高度将父元素 (article[_v-f4d9afa6]) 的高度推到了所需的水平之上。子元素应用了 margin 和 height，这实际上意味着它们占据父元素的总高度是 50% + 50% + margins.

分辨率

要修复，您需要确保总数 height 等于 50%。有几种方法可以实现这一点：

使用计算器

使用 calc 我们可以从 height:

中删除 margin-top

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

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

使用 flexbox

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

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

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

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

How to create a container where divs fill it horizontally and vertically (and with margin on 4 sides)?

html

css

问题

分辨率

使用计算器

使用 flexbox