Заполнить весь вид страницы с помощью CSS / Flexbox - PullRequest
Новая
       6

Заполнить весь вид страницы с помощью CSS / Flexbox

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

Высота все еще смущает меня, и когда и где ее поставить.

https://jsfiddle.net/3pxmm0mz/

<div id="app"> 
     <div className="wrapper">
        <header>Header</header>
        <nav>
              Nav
          </nav>
        <div className="main-wrapper">
          <main>
            main
          </main>
          <footer>
            footer
          </footer>
        </div>
      </div>
</div>



body,
html {
  height: 100%;
  margin: 0;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    header {
      background: red;
      flex: 0 0 100%;
    }

    nav {
      background: blue;
      flex: 0 0 5%;
    }

    .main-wrapper {
      background: gray;
      display: flex;
      flex: 0 0 95%;
      flex-wrap: wrap;
      main {
        background:  yellow;
        flex: 0 0 100%;
      }

      footer {
        background: darkorange;
        flex: 0 0 100%;
      }
    }
}

Я пытаюсь добиться того, чтобы все области заполнили весь экран(без полос прокрутки).

Я бы хотел, чтобы заголовок был макс-25%.Нижний колонтитул, вероятно, 25% (хотя я все еще не уверен, хочу ли я, чтобы нижний колонтитул всегда показывался).

Если навигационное и, возможно, основное содержимое должно иметь полосы прокрутки, как только содержимое превышает размер экрана.

Ответы [ 3 ]

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

почему бы не передать это 100vh детям и установить высоту в процентах, как вам нравится. 

body, html {
    height: 100vh;
    margin: 0;
}


.wrapper {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
}

header {
    background: red;
    flex: 0 0 100%;
    max-height:25%;
 height:25%;
}

nav {
    background: blue;
    flex: 0 0 5%;
    height:75%;
}

.main-wrapper {
    background: gray;
    display: flex;
    flex: 0 0 95%;
    flex-wrap: wrap;
    height:75%;    
}

main {
    background: yellow;
    flex: 0 0 100%;
    height:75%;
    overflow-y: auto;
}

footer {
    background: darkorange;
    flex: 0 0 100%;
    height:25%;
    max-height:25%;
}
<div id="app">
  <div class="wrapper">
    <header>Header</header>
    <nav>
      Nav
    </nav>
    <div class="main-wrapper">
      <main>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </main>
      <footer>
      footer
    </footer>
    </div>
    
  </div>
</div>
0 голосов
/ 31 мая 2018

Я вижу, что вы используете CSS Flexbox flex и flex-wrap для создания полноэкранного двухмерного макета, но модуль flexbox в основном предназначен для руководстваотображение отдельных дискретных элементов на странице здесь и там по всей странице.

В идеале в этой настройке вы можете - и, возможно, должны - использовать CSS Grid .

Это даст вам все виды гибкости - не говоря уже о простота - к которой у вас не будет доступа через flexbox.

Рабочий пример: 

#app {
display: grid;
grid-template-rows: 25% 50% 25%;
grid-template-columns: 10% 90%;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}

header {
grid-area: 1 / 1 / 2 / 3;
background-color: red;
}

nav {
grid-area: 2 / 1 / 3 / 2;
background-color: blue;
}

main {
grid-area: 2 / 2 / 3 / 3;
background-color:  yellow;
}

footer {
grid-area: 3 / 1 / 4 / 3;
background-color: darkorange;
}
<div id="app"> 
<header>Header</header>
<nav>Nav</nav>
<main>main</main>
<footer>footer</footer>
</div>
0 голосов
/ 30 мая 2018

https://jsfiddle.net/3pxmm0mz/1/

body,
html {
  height: 100vh;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  header {
    background: red;
    flex: 0 0 100%;
    height: 100px;
  }
  nav {
    background: blue;
    flex: 0 0 5%;
  }
  .main-wrapper {
    background: gray;
    display: flex;
    flex: 0 0 95%;
    flex-wrap: wrap;
    main {
      background: yellow;
      flex: 0 0 100%;
      min-height: calc(100vh - 200px);
      overflow: auto;
    }
  }
  footer {
    background: darkorange;
    flex: 0 0 100%;
    height: 100px;
  }
}
<div id="app">
  <div class="wrapper">
    <header>Header</header>
    <nav>
      Nav
    </nav>
    <div class="main-wrapper">
      <main>
        main
      </main>
    </div>
    <footer>
      footer
    </footer>
  </div>
</div>

Вы можете настроить calc (), чтобы вычитать процент или фиксированное количество пикселей в зависимости от того, что вы хотите.

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

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

...