Как создать веб-страницу, используя 100vh, чтобы быть отзывчивым - PullRequest
Новая
       4

Как создать веб-страницу, используя 100vh, чтобы быть отзывчивым

0 голосов
/ 06 мая 2018

Мне нужно создать веб-страницу, которая использует 100vh или занимает 100% высоты и ширины экрана (без прокрутки). Я создал контейнер (высота: 100vh), в котором содержится все, и в этом контейнере мне нужно, чтобы все было там, чтобы быть отзывчивым.

Концепция дизайна: enter image description here

Высота внешнего контейнера 100vh, и мне нужно, чтобы внутренний контейнер реагировал: 

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

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

Проблема, с которой я сталкиваюсь, заключается в использовании 100vh, содержимое внутри контейнера не реагирует и имеет тенденцию переполняться.

Jsfiddle к тому, что я до сих пор: https://jsfiddle.net/fm6hmgpk/

Ответы [ 3 ]

0 голосов
/ 06 мая 2018

Гибкое решение 

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>

Расчет: (для прокрутки)

<body> по умолчанию margin:8px; и ваш border:2px solid black; Суммирует до 10px, поэтому нам нужно вычесть дважды 10px

Следовательно height: calc(100vh - 20px);

EDIT:

Чтобы сделать его отзывчивым, вам нужно избавиться от фиксированного px значения вашего 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>
0 голосов
/ 06 мая 2018

Вы можете рассмотреть возможность использования сетки. Для поддержки браузера вы можете проверить здесь .

Чтобы узнать об использовании сетки, отметьте здесь . 

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>
0 голосов
/ 06 мая 2018

Я думаю, это потому, что ваша высота li является фиксированной высотой, поэтому, если ваша высота корня меньше суммы этих высот li, она будет переполнена. Вы можете использовать VH для них тоже.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...