Почему не мой justify-content: начать работу для Flexbox? - PullRequest
Новая
       2

Почему не мой justify-content: начать работу для Flexbox?

0 голосов
/ 20 января 2019

Я пытался понять это. По сути, идея состоит в том, чтобы все блоки были сгруппированы вместе, но каким-то образом это приводит к тому, что между основным и нижним колонтитулом возникает запас huuuuuuge. Пожалуйста, помогите.

CSS

Добавлен только CSS, относящийся к трем коробкам ... 

body{
     display: flex;
     flex-direction: column;
     justify-content: start;
     flex-wrap: wrap;
     height: 100vh;
     width: 100vw;
     margin: 0;
 }
 header{
     background-color: white;
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
     width:100vw;
     height: 10vh;
     margin: 0;
 }
 main{
     background-color: #f1f1f1;
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
     width: 100vw;
     height: 85vh;
     margin: 0;
 }
 footer{
     background-color: #666666;
     height: 4vh;
     width: 100vw;
 }
<body>
    <header>
        <div id="headercontentwrapper">
            <div id="logowrapper"></div>
            <div id="navwrapper"></div>
        </div>
    </header>
    <main>
        <div id="contentwrapper">
            <div id="contentheaderwrapper"></div>
            <div id="actualcontentwrapper"></div>
        </div>
    </main>
    <footer>
    </footer>
</body>

Установка поля в 0 для нижнего колонтитула не помогает

Ответы [ 3 ]

0 голосов
/ 20 января 2019

Используйте flex вместо height для своих детей во flexbox. 

body{
       display: flex;
       flex-direction: column;
       justify-content: stretch;
       flex-wrap: wrap;
       height: 100vh;
       width: 100vw;
       margin: 0;
   }
   header{
       background-color: white;
       display: flex;
       flex-direction: row;
       justify-content: center;
       flex-wrap: wrap;
       width:100vw;
       flex: 0 0 10vh;
       margin: 0;
   }
   main{
       background-color: #f1f1f1;
       display: flex;
       flex-direction: row;
       justify-content: center;
       flex-wrap: wrap;
       width: 100vw;
       flex: 1;
       margin: 0;
   }
   footer{
       background-color: #666666;
       flex: 0 0 4vh;
       width: 100vw;
   }
<body>
  <header>
    <div id="headercontentwrapper">
      <div id="logowrapper"></div>
      <div id="navwrapper"></div>
    </div>
  </header>
  <main>
    <div id="contentwrapper">
      <div id="contentheaderwrapper"></div>
      <div id="actualcontentwrapper"></div>
    </div>
  </main>
  <footer>
  </footer>
</body>
0 голосов
/ 20 января 2019

Просто удалите height: 85vh; из своей основной, и все в порядке.Проблема в том, что ваше тело имеет высоту 100vh, а главное - 85vh.Вот почему между главным и нижним колонтитулами был «huuuuuge margin»;)

Надеюсь, это помогло!

0 голосов
/ 20 января 2019

Как я уже сказал в своем комментарии, ваш код выглядит нормально, может, есть что-то еще, что вызывает проблемы?

ps: я сделал фрагмент и исправил ваши теги 

body {
	display: flex;
	flex-direction: column;
	justify-content: start;
	flex-wrap: wrap;
	height: 100vh;
	width: 100vw;
	margin: 0;
}

header {
	background-color: white;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	width: 100vw;
	height: 10vh;
	margin: 0;
}

main {
	background-color: #f1f1f1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	width: 100vw;
	height: 85vh;
	margin: 0;
}

footer {
	background-color: #666666;
	height: 4vh;
	width: 100vw;
}
<html>
<head>
</head>
<body>
    <header>
        <div id="headercontentwrapper">
            <div id="logowrapper"></div>
            <div id="navwrapper"></div>
        </div>
    </header>
    <main>
        <div id="contentwrapper">
            <div id="contentheaderwrapper"></div>
            <div id="actualcontentwrapper"></div>
        </div>
    </main>
    <footer>
    </footer>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...