2

Не могу выровнять блок footer ниже всего, а выравниваеться по низу блока leftbar

* {
  padding: 0;
  margin: 0;
}

body {
  background: #22313a;
  /*height: 1000px;*/
}

.navigation {
  height: 60px;
  display: block;
  margin-bottom: 25px;
}

.navigation>div {
  background: #25252d;
  /*height: 100%;*/
  box-shadow: 1px 0 5px;
  display: inline-block;
  line-height: 60px;
}

.main {}

.item-container {
  display: inline-block;
  padding: 0 16px;
}

.item-container>a {
  color: white;
  text-decoration: none;
}

.item-container:hover {
  background: #1d1d27;
}

.item-container+.f-right+.active {
  background: #1d1d27;
}

.item-container+.f-right+.mail>a {
  color: #777777;
}

.f-right {
  float: right;
}

.left-bar {
  width: 20%;
  background-color: #2b3942;
  height: 500px;
  display: inline-block;
  color: white;
}

.right-bar {
  width: 77%;
  /*background-color: #2b3942;*/
  /*height: 500px;*/
  display: inline-block;
}

.card-item {
  height: 150px;
  background-color: #2b3942;
}

.disc {
  background-color: #2b3942;
  height: 200px;
  color: white;
}

.footer {
  display: block;
  background-color: #2b3942;
  height: 20px;
  color: white;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <title>Hello, world!</title>
</head>

<body>

  <div class="navigation">
    <div class="container-fluid">
      <div class="items">
        <div class="item-container">
          <a href="index.html">
                    CLOUD-MINING-SERVICES.COM
                </a>
        </div>

        <div class="item-container f-right">
          <a href="#">
            <img src="images/eng.png" alt="">
          </a>
        </div>

        <div class="item-container f-right active">
          <a href="#">
            <img src="images/rus.png" alt="">
          </a>
        </div>

        <div class="item-container f-right mail">
          <a href="mailto:info@Cloud-Mining-Services.com">
                    info@Cloud-Mining-Services.com
                </a>
        </div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="bar left-bar mt-3">
      <p>Leftbar</p>
    </div>
    <div class="bar right-bar f-right">
      <div class="container p-0">
        <div class="row mr-3">
          <div class="card-item m-3 p-0 col-md"></div>
          <div class="card-item m-3 p-0 col-md"></div>
          <div class="card-item m-3 p-0 col-md"></div>
          <div class="card-item m-3 p-0 col-md"></div>
          <div class="w-100"></div>
          <div class="card-item m-3 p-0 col-md"></div>
          <div class="card-item m-3 p-0 col-md"></div>
          <div class="card-item m-3 p-0 col-md"></div>
          <div class="card-item m-3 p-0 col-md"></div>
          <div class="w-100"></div>
        </div>
      </div>
      <div class="container p-0">
        <div class="row mr-3">
          <div class="disc m-3 p-3 col">
            <h3>Decsription</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <p>Footer</p>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

1

1 ответ 1

2

Почитай тут или погугли clearfix https://webcareer.ru/clearfix-na-css.html в интернете много информации на эту тему.

1
  • Пожалуйста, публикуйте ссылки в качестве дополнения к вашему ответу, а не вместо него. После изменения или удаления материалов по ссылке ваш ответ в нынешней редакции не будет иметь смысла. 21 фев 2018 в 16:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.