Сетка на весь экран с помощю CSS

Question

Как растянуть Main и Content на все оставшейся место по высоте с помощью CSS?

<body>

 <div class="wrapper">

 <div class='Header'>Header</div>

 <div class="cont">
   <div class='Main'>Main</div>
   <div class='Content'>Content</div>
 </div>

 <div class='Footer'>Footer</div>

  </div>

  <script src="script.js"></script>
 </body>

 <style>
   html,
   body,
  .wrapper {
   height: 100%;
 }

 .wrapper div {
  border: 1px solid red;
 }
 .wrapper .cont{

  }
 .wrapper .Main {
  float: left;
  width: 50%;
 }

 .wrapper .Header {
  height: 150px;
 }

 .wrapper .Footer {
  height: 100px;
 </style>

Answer 1

У Вас элементы с классами Main и Content входят в блок с классом cont.

Чтобы растянуть данные элементы по высоте, Вам необходимо сначала задать всему блоку с классом cont высоту в 100%, а затем задать элементам Main и желательно Content соответствующую высоту.

    html,
    body,
    .wrapper {
        height: 100%;
    }

    .wrapper div {
        border: 1px solid red;
    }
    .wrapper .cont{
        height: 100%;
    }
    .wrapper .Main {
        float: left;
        width: 50%;
        height: 100%;
    }

    .wrapper .Header {
        height: 150px;
    }

    .wrapper .Footer {
        height: 100px;
    }

<body>

<div class="wrapper">

    <div class='Header'>Header</div>

    <div class="cont">
        <div class='Main'>Main</div>
        <div class='Content'>Content</div>
    </div>

    <div class='Footer'>Footer</div>

</div>

<script src="script.js"></script>
</body>

БЛОГ НА HUSL

Сетка на весь экран с помощю CSS

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