Как исправить Component-Streching при использовании vh с flexbox? - PullRequest
Новая
       7

Как исправить Component-Streching при использовании vh с flexbox?

0 голосов
/ 24 сентября 2019

Я пытаюсь создать макет сайта, используя макет flexbox.Основная цель - иметь верхний колонтитул, нижний колонтитул и навигацию слева.Основные и боковые части должны располагаться посередине и справа.Пока я получил его на работу, используя следующее: 

html {
    font-family: sans-serif;
    font-size: 1rem;
}

* {
    box-sizing: border-box;
    padding: 0;
    border: 0;
    margin: 0;
}

html * {
    /* debugging */
    border: 1px dotted hotpink;
}

body {
    display: flex;
    flex-flow: row wrap;
   /* height: 100vh; */
}

nav {
    width: 10%;
}

main {
    width: 75%;
}

aside {
    width: 15%;
}

header, footer {
    width: 100%;
    text-align: center;
    background-color: hotpink;
}

main {
    flex: 1 1 auto;
}

nav {
    background-color: lightblue;
}

nav ul {
    display: flex;
    flex-flow: column nowrap;
    list-style-type: none;
}

nav ul li:hover {
    background-color: royalblue;
}

nav ul li a {
    display: block;
    text-decoration: none;
    padding: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>
    <header>
        <h1>THIS IS THE REALLY BIG HEADER</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
            <li><a href="#">menu5</a></li>
        </ul>
    </nav>
    <main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga unde consequatur laborum cupiditate odio ipsa
        cumque, dolorem temporibus aut ipsam commodi autem maiores delectus non vitae recusandae magni consequuntur ab!
    </main>
    <aside>aside</aside>
    <footer>(c) by me</footer>
</body>
</html>

Однако: при использовании линии / * высота: 100vh;* / все компоненты растянуты, чтобы использовать всю высоту экрана.Мое намерение состоит в том, чтобы просто растянуть навигацию, основной и боковой, но позволить верхнему и нижнему колонтитулам использовать только необходимое пространство.Как я могу это сделать?

Ответы [ 2 ]

2 голосов
/ 24 сентября 2019

Вы можете сделать следующее:

1) Установить для <body> свойство тега 

flex-flow: column;
min-height: 100vh;

2) Добавить оболочку для тегов <nav>, <main>, <aside>и установите для этого свойства 

flex-grow: 1;
display: flex;

Результат 

html {
  font-family: sans-serif;
  font-size: 1rem;
}

* {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  margin: 0;
}

html * {
  /* debugging */
  border: 1px dotted hotpink;
}

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

nav {
  width: 10%;
}

main {
  width: 75%;
}

aside {
  width: 15%;
}

header,
footer {
  width: 100%;
  text-align: center;
  background-color: hotpink;
}

main {
  flex: 1 1 auto;
}

nav {
  background-color: lightblue;
}

nav ul {
  display: flex;
  flex-flow: column nowrap;
  list-style-type: none;
}

nav ul li:hover {
  background-color: royalblue;
}

nav ul li a {
  display: block;
  text-decoration: none;
  padding: 0.5em;
}

.page {
  flex-grow: 1;
  display: flex;
}
<header>
  <h1>THIS IS THE REALLY BIG HEADER</h1>
</header>
<div class="page">
  <nav>
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
    </ul>
  </nav>
  <main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga unde consequatur laborum cupiditate odio ipsa cumque, dolorem temporibus aut ipsam commodi autem maiores delectus non vitae recusandae magni consequuntur ab!
  </main>
  <aside>aside</aside>
</div>
<footer>(c) by me</footer>

И тот же код на CodePen

enter image description here

0 голосов
/ 24 сентября 2019

Сделайте это: 

body { 
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...