Niranjan Kartha Niranjan Kartha - 3 months ago 13
HTML Question

Have two (or more) divs with display: table-cell fill the entire screen, irrespective of the content in them using CSS

I want 2 divs, stacked on top of each other, with

display: table-cell;
.

I also want each div to have height and width as 100% of the screen.

I've already tried to do this, but I couldn't do it fully and here's my code.



body,
html {
height: 100%;
}
body {
margin: 0;
}
.height {
min-height: 100%;
}
.width {
width: 100%;
}
.wrapper {
position: relative;
height: 100%;
display: table;
margin: 0 auto;
}
.in-wrap {
display: table-row;
}
.align {
position: relative;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.black {
background-color: black;
color: white;
}

<div class="width wrapper">
<div class="in-wrap">
<div class="align black">
<h3>Lorem ipsum dolor sit amet,</h3>
<p>
<button>consectetur adipiscing elit</button>
</p>
</div>
</div>
<div class="in-wrap">
<div class="align">
<h3>Donec auctor ornare augue vel lobortis.</h3>
<p>Nulla pellentesque urna vitae felis congue aliquet.</p>
<button id="projects">Nullam vitae pharetra nisl.</button>
</div>
</div>
</div>




Answer

Give .in-wrap a height of 100vh and get rid of all of the height: 100%'s

.in-wrap {
  height: 100vh;
  display: table-row;
}

Example....

body {
  margin: 0;
}

.width {
  width: 100%;
}
.wrapper {
  position: relative;
  display: table;
  margin: 0 auto;
}
.in-wrap {
  height: 100vh;
  display: table-row;
}
.align {
  position: relative;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.black {
  background-color: black;
  color: white;
}
<div class="width wrapper">
  <div class="in-wrap">
    <div class="align black">
      <h3>Lorem ipsum dolor sit amet,</h3>
      <p>
        <button>consectetur adipiscing elit</button>
      </p>
    </div>
  </div>
  <div class="in-wrap">
    <div class="align crisscross">
      <h3>Donec auctor ornare augue vel lobortis.</h3>
      <p>Nulla pellentesque urna vitae felis congue aliquet.</p>
      <button id="projects">Nullam vitae pharetra nisl.</button>
    </div>
  </div>
</div>