БЛОГ НА HUSL


Верстка HTML, чтобы содержимое помещалось в экран

Автор вопроса: Наталья Сергеевна

Подскажите пожалуйста как в этом макете сделать так, чтобы блоки nav и footer были соответственно сверху и внизу, всю остальную видимую часть занимал блок page_wrapper.

Т.е. в итоге нужно чтобы все содержимое страницы помещалось на страницу (без прокрутки), а содержимое page_wrapper можно было прокручивать

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:form="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width"/>
    <title>Страница</title>
</head>
<body>

<nav class="navbar navbar-expand-lg">
   Menu
</nav>

<div class="page_wrapper">
    Content
</div>

<footer>
    Footer
</footer>

</body>
</html>

введите сюда описание изображения


Источник

Ответы (2 шт):

Автор решения: soledar10 

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #ddd;
  margin: 0;
}

nav,
footer{  
  background-color: #ccc;
  height: 40px;
}

.page_wrapper {  
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

footer {
  margin-top: auto;
}
<nav class="navbar navbar-expand-lg">Menu</nav>
<div class="page_wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem qui nostrum obcaecati repudiandae cupiditate quod aut totam error eos, sunt a, corporis dolor aliquam ut rem inventore expedita quidem.</p>
</div>
<footer>Footer</footer>

→ Ссылка
Автор решения: RoNULL 

body {
  display: flex;
  flex-direction: column;
  width: 100vh;
  height: 1000%;
}

nav {
  height: 50px;
  border: solid;
  top: 0;
  position: sticky;
  
}

div {
  height: 100vh;
  border: solid;
  flex: 1 0 auto;
}

footer {
  height: 50px;
  border: solid;
  bottom: 0;
  position: sticky;
  flex: 0 0 auto;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:form="http://www.w3.org/1999/html">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <title>Страница</title>
</head>

<body>

  <nav class="navbar navbar-expand-lg">
    Menu
  </nav>

  <div class="page_wrapper">
    Content
  </div>

  <footer>
    Footer
  </footer>

</body>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.