Hello. I am making a 2-column layout with a footer stuck to the bottom of the screen. Faced the problem of losing the height of the .aside block when the content in the .content block .content . I just can not understand the reason for this behavior.

I .aside block .aside with a small amount of content in the .content block, should fill the entire height up to footer.

Link to the problem (just add content): http://codepen.io/astor/pen/rrBdmy?editors=1100

 * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; } .wrapper { display: table; width: 100%; height: 100%; } .main { display: table-row; height: 100%; } .aside { float: right; width: 300px; min-height: 100%; background: gold; } .content { padding-right: 320px; min-height: 100%; background: silver; } footer { background: red; } 
 <div class="wrapper"> <div class="main"> <div class="aside">Menu</div> <div class="content"> Откуда он появился? Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. </div> </div> <footer>footer</footer> </div>

Thank you in advance.

  • What is your browser, Google Chrome? I checked it myself - Chrome collapses the height, but Internet Explorer 11 does not; I did not check on others. - ߊߚߤߘ
  • Chrome, In Oslo 11 is the same nonsense, just checked. - Astor
  • Strange ... i.stack.imgur.com/FAFkw.png . I have version 11.0.9600.18314, KB3154070. - ߊߚߤߘ

2 answers 2

Add overflow:auto to content , and remove the padding-right .

Result:

 * { margin: 0; padding: 0; box-sizing: border-box; } body, html { width: 100%; height: 100%; } .wrapper { display: table; width: 100%; height: 100%; } .main { display: table-row; height: 100%; } .aside { float: right; width: 300px; min-height: 100%; background: gold; } .content { min-height: 100%; background: silver; overflow: auto; } footer { background: red; } 
 <div class="wrapper"> <div class="main"> <div class="aside">Menu</div> <div class="content"> Откуда он появился? Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32 Откуда он появился? Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32Откуда он появился? Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32Откуда он появился? Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32Откуда он появился? Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32Откуда он появился? Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32Откуда он появился? Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32 </div> </div> <footer>footer</footer> </div>

  • Cool! Thank you. As always, everything turned out to be simple))) In general, what is the reason for this behavior of browsers - with minimal gud content, with a large bad? - Astor
  • @Astor Because you use float, it is better not to do this for the future. Try to avoid float and position:relative - many problems can create, with illiterate use. - user192664
  • Got it. I will consider Thanks again .. - Astor
  • Another point is if paddings are specified for .aside and .content, then an extra indent appears between the footer and the blocks. How to deal with it? - Astor
  • @Astor use for these blocks instead of height -> min-height and for both overflow:auto , or any suitable for you, for example scroll . - user192664

add display: table-cell to .aside and .content - everything seems normal http://codepen.io/anon/pen/bwbKOy?editors=1100

 .aside { width: 300px; background: gold; display: table-cell; } .content { display: table-cell; background: silver; }

But problems with the footer - it needs to be taken out for .wrapper

And generally I would do such things with the help of flexbox