1

Footer хочу расширить именно с помощью свойства height. Не получается.

left menu и content сделаны left и right FLOAT, соответственно.

По какой причине футер не виден и не расширяется?

 .container {
                    position: relative;
                    height: 2000px;
                    margin: 0px auto;
                    min-height: 100%;
                }
               
                .header {
                   width: 100%;
                   border: 4px;
                   background: palegreen;
                   height: 150px;
                }
               
                .left-menu {
                   width: 30%;
                   border: 4px;
                   background: aqua;
                   float: left;
                   height: 300px;
                }
               
                .content {
                   width: 70%;
                   border: 4px;
                   background: teal;
                   float: right;
                   height: 300px;
                }
               
                .footer {
                   width: 100%;
                   height: 150px;
                   border: 4px;
                   background: palegreen;
                }
<body>
       
<div class="container">

<div class="header">HEADER</div>
<div class="left-menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>

</div>

</body>

3
  • Чем обусловлено использование float ? Почему не flex ?
    – Hikikomori
    25 июл 2018 в 16:46
  • float - классика вёрстки. должен работать при умелом использовании. 25 июл 2018 в 16:47
  • Таблицы тоже классика, это не значит что их надо использовать.
    – Hikikomori
    25 июл 2018 в 16:49

1 ответ 1

3

 .container {
                    position: relative;
                    
                    margin: 0px auto;
                    
                }
               
                .header {
                   width: 100%;
                   border: 4px;
                   background: palegreen;
                   height: 150px;
                }
               
                .left-menu {
                   width: 30%;
                   border: 4px;
                   background: aqua;
                   float: left;
                   height: 300px;
                }
               
                .content {
                   width: 70%;
                   border: 4px;
                   background: teal;
                   float: right;
                   height: 300px;
                }
               
                .footer {
                   width: 100%;
                   height: 150px;
                   border: 4px;
                   background: palegreen;
clear: both;
                }
<body>
       
<div class="container">

<div class="header">HEADER</div>
<div class="left-menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>

</div>

</body>

3
  • clear: both - как объяснить механику действия? 25 июл 2018 в 16:55
  • @Dmitry Nikitin отменяет обтекание у блока с определенных сторон - htmlbook.ru/css/clear
    – midia
    25 июл 2018 в 17:37
  • как же (куда?) обтекание проходило, что футер ( до clear: both ) исчезал полностью? 26 июл 2018 в 8:56

Ваш ответ

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

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