CODEWITHSUNDEEP
htmlcsslayout
Leon
Leon

Reputation: 77

How to create a web page using 100vh to be responsive

I need to create a web page that uses 100vh, or takes up 100% of the screen height and width (no scroll). I created a container(height:100vh) that holds everything in it, and within that container, I need everything in there to be responsive.

Design concept: enter image description here

The outer container height is 100vh and I need the inner container to be responsive:

#root {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#root-inner-container {
   width: 100%;
}

The problem I run into is by using 100vh, the content inside the container does not stay responsive and tends to overflow.

Jsfiddle to what I have so far: https://jsfiddle.net/fm6hmgpk/

Upvotes: 3

Views: 8022

Answers (3)

Gerard
Gerard

Reputation: 15786

You may want to consider using grid. For browser support you can check here.

To learn about using grid, check here.

body {
  margin: 0
}

#root {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1fr 3fr;
  grid-template-rows: 1fr 3fr 1fr;
  background-color: #fff;
  color: #444;
  width: 100vw;
  height: 100vh;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.navbar {
  grid-column: 1 / 4;
  grid-row: 1;
}

.content {
  grid-column: 1;
  grid-row: 2 / 3;
}

.list {
  grid-column: 2;
  grid-row: 2;
}

.image {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

.text {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}
<div id="root">
  <div class="navbar box">Navbar</div>
  <div class="content box">Content</div>
  <div class="list box">List</div>
  <div class="image box">Image</div>
  <div class="text box">Text</div>
</div>

Upvotes: 1

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Flex Solution

body {
  margin: 0;
  color: white;
}

.container {
  background: grey;
  width: 100vw;
  height: 100vh;
}

.navbar {
  height: 15vh;
  background: darkblue;
  margin: 0 10px;
}

.bottom {
  background: lightgrey;
  height: 85vh;
  margin: 0 10px;
  display: flex;
}

.left-bottom {
  background: red;
  width: 70%;
  display: flex;
  flex-direction: column;
}

.right-bottom {
  flex: 1;
  background: lightgrey;
}

.content-list {
  display: flex;
  height: 80%;
  background: maroon;
}

.text {
  flex: 1;
  background: green;
}

.content {
  width: 80%;
  background: orange;
}

.list {
  flex: 1;
}
<div class="container">
  <div class="navbar">
    NAVBAR
  </div>
  <div class="bottom">
    <div class="left-bottom">
      <div class="content-list">
        <div class="content">
          CONTENT
        </div>
        <div class="list">
          LIST
        </div>
      </div>
      <div class="text">
        TEXT
      </div>
    </div>
    <div class="right-bottom">
      IMAGE
    </div>
  </div>
</div>

Calculation: (For scrolling issue)

<body> default margin:8px; and your border:2px solid black; Sums up to 10px so we need to deduct twice of 10px

Hence height: calc(100vh - 20px);

EDIT:

To make it responsive you need to get rid of fixed px value to your li

li {}

#root {
  display: flex;
  position: relative;
  height: calc(100vh - 20px);
  border: 2px solid black;
}

#root-inner-container {
  flex: 1;
  width: 100%;
  display: flex;
}

.app-container {
  flex: 1;
  display: flex;
}

.div-1,
.div-2 {
  flex: 1;
  display: flex;
}

ul {
  flex: 1;
  display: flex;
  flex-direction: column;
}

li {
  flex: 1;
  border: 1px solid red;
}
<div id="root">
  <div id="root-inner-container">
    <div class="app-container">
      <div class="div-1">
        <ul>
          <li>div 1 - One</li>
          <li>div 1 - Two</li>
          <li>div 1 - Three</li>
          <li>div 1 -Four</li>
        </ul>
      </div>

      <div class="div-2">
        <ul>
          <li>div 2 - One</li>
          <li>div 2 - Two</li>
          <li>div 2 - Three</li>
          <li>div 2 -Four</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

mssoheil
mssoheil

Reputation: 110

I think it's because your li height is fixed height so if your root height is less than the sum of those li height it will overflow. you can use vh for them too.

Upvotes: -1

Related Questions