Весь текст/картинки оказываются в верхней части сайта

Question

Добавляю картинки/текст и даже < footer > ,но он оказывается рядом с < header >

body{
background:url(img/fon.jpg) no-repeat center center; 
color:#fff; 
text-align:center; 
background-size:cover;
padding-bottom: 700px ;
}

header{
    width: 100%;
    background: #D8E3AB;
    height: 50px;
}
*{
    margin:0px;
    padding:0px;}
.menu
{
    height:40px;
    float:left;
    width:20%;
    text-align:center;}
.menu a{
    line-height:40px;}
.menu img
{
    width:180px;
    height:140px;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
<header>
        <div id="header"> <div  class="menu">
            <a href="">Главная страница</a>
        </div>
        <div  class="menu">
            <a href="tovar.html">Наша выпечка</a>
        </div>
        <div  class="menu">
            <img src="https://trkfavorit.ru/upload/iblock/289/289bf82a8f3f61458e4a1ea3938e2b6b.png" >
        </div>
        <div  class="menu">
             <a href="contact.html">Заказать</a>
        </div>
        <div  class="menu">
            <a href="">Пункт самовывоза</a>
        </div></div>
    </header>
    <main>

    </main>
    <footer class="footer-distributed">
        <div class="footer-right">
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
        </div>
        <div class="footer-left">
          <p class="footer-links">
            <a class="link-1" href="#">Home</a>
            <a href="#">Blog</a>
            <a href="#">Pricing</a>
          </p>
          <p>Пекарня Серёжи 1337</p>
        </div>
  
      </footer>
    </html>

Answer 1

Чтобы достичь такого позиционирования, можно использовать Flexbox и небольшой трюк с margin-top: auto; в footer

Добавьте эти свойства в CSS:

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

footer {
  margin-top: auto;
}

БЛОГ НА HUSL

Весь текст/картинки оказываются в верхней части сайта

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