3

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/

Dhaval Jardosh
  • 7,151
  • 5
  • 27
  • 69
Leon
  • 77
  • 2
  • 8

3 Answers3

1

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>
Dhaval Jardosh
  • 7,151
  • 5
  • 27
  • 69
1

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>
Gerard
  • 15,418
  • 5
  • 30
  • 52
  • +1 Grid is a great solution. To get rid of irritating vertical and horizontal scroll you might want to add `body{margin:0}` :) – Dhaval Jardosh May 06 '18 at 06:54
-1

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.

mssoheil
  • 110
  • 1
  • 14
  • But it doesn't make the page responsive. It just ends up shrinking all the content within the container – Leon May 06 '18 at 06:09
  • yes but if you resize the webpage it will grow and shrink so it is responsive; when you use 150px it won't be responsive .you can use mediaqueries too – mssoheil May 06 '18 at 06:18