Как расширишь footer с помощью css (height-свойство)?

251

26 сентября 2018, 10:40

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>

Answer 1

 .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>