When adding the block "main" of the text to the "left_top" child block, the text itself goes beyond the footer, but must move it. Why is jak going?

* { margin: 0; padding: 0; } html, body { height: 100%; } #wrapper { height: 100%; width: 960px; margin: 0 auto; background: #bfbfbf; display: flex; flex-direction: column; } header { flex: 0 0 100px; background: #7df799; border-bottom: 1px solid #000000; } main { display: flex; flex: 1 1; flex-direction: row; } #left { background: #bcaff4; flex: 0 0 250px; border-right: 1px solid #000000; } #left_top { } #left_bottom { } #content{ flex: 1 1; } footer { flex: 0 0 200px; border-top: 1px dashed #000000; background: #7df799; } 
  <html> <head> <meta charset="utf-8"> <title>TESTIK</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrapper"> <header>header</header> <main class="clearfix"> <div id="left"> <div id="left_top">left_top</div> <div id="left_bottom">left_bottom</div> </div> <div id="content">content</div> </main> <footer>footer</footer> </div> </body> </html>

  • Is it possible to do this without flex boxes, but with positioning? - Roman Friedman

1 answer 1

 main { ... flex: 1 1; ... }

Because it allows you to compress it to 0.

Change to

 flex: 0 0 auto;
  • Changed, the footer is not pressed to the bottom of the screen, if there is no content - Roman Friedman
  • @ RomanFridman, 1 0 auto ? - Qwertiy ♦