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

Question

This is the closest I could get:

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

But as you can see the bottom margin is lost. The margin only stays if there's only one panel.

How can I do it so there's always a bottom margin regardless of how many panels I have? (The height of the panels will always sum up to 100%.)

Here's the JSFiddle.

Answer 1

The problem

This is due to the cumulative height of the two child elements (article[_v-e514def2]) pushing the height of the parent (article[_v-f4d9afa6]) over the desired level. The child elements have margins as well as height applied to them which effectively means that that total height they occupy of the parent is 50% + 50% + margins.

Resolution

To fix you need to ensure that the total height is equal to 50%. There are a couple of ways to achieve this:

Use calc

Using calc we can remove margin-top from the 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;
}
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>

Use flexbox

Using the flexbox model will tell the child elements to automatically grow to a suitable height to fit the parent:

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