Выровнять блок footer внизу под всем

248

23 февраля 2018, 16:11

Не могу выровнять блок 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>

Answer 1

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Выходит объект за пределы круга SVG

192

CSS

Нужны ли сейчас css препроцессоры [требует правки]

Нужны ли сейчас css препроцессоры

192

CSS

У кого то есть похожие табы?

Добрый вечер! Может у кого то есть похожие табы с каруселью (не знаю как правильно называется) Пример:

260

CSS

JavaScript, как сделать “фильтр” при клике?

Здравствуйте, можете, подсказать по JavaScriptЕсть многоуровневое меню, и вот в данной ситуации, по клику на кнопку – span с классом submenu-caret, у меня...

214