Good day!

I must say that I used the search and could not find the answer to my variation of the question.

And I will add that I have two parts of the same question, therefore I immediately apologize for many letters and, possibly, difficult to read text.

Preface.

I have a fixed-height header, say 150px (actually 169, and generally changes depending on media queries, but this is not important). Then DIV, which I want to stretch to 100% of the remaining height between the cap and the next layers. And one layer with a fixed height of 100px and a basement with a fixed (sorry for the tautology) height of 60px. That is, the formula is simple:

neccesary_height = window.outerHeight - 310

In fact, here is an example of another author who works perfectly if there is content for the entire height of the container.

http://jsfiddle.net/gBr58/1/

Then if you resize the window, then a scrollbar appears and everything works as it should.

Question 1.

And if the content is less than the rest of the window’s height or not at all, then when the window is resized (or initially small) all the blocks below simply run into it and then it disappears completely.

http://jsfiddle.net/qsad/x8s0rytk/

Does anyone have any idea how to solve this? CSS, JavaScript - everything will do.

Question 2.

If inside this DIV position two blocks with:

 width:50%; float:left; height:100%;

then they will not inherit the height of the parent and will occupy only that height, which is equal to their content. Specially reduced the height of all the blocks to illustrate the problem.

And I need them to inherit ..

http://jsfiddle.net/qsad/zdm6e0Lk/

Thank you in advance for the answers.

  • current flex if - Jean-Claude

1 answer 1

If I understand you correctly, calc should solve your problem:

 html, body { margin: 0; height: 100%; font-family: sans-serif; font-size: 0.9em; } .relative { position: relative; } .header { height: 150px; background: #aaeedd; } .elastic { height: calc(100% - 300px); min-height: 30px; background: #efefef; } .elastic_half { position: relative; float: left; width: 50%; height: 100%; } .elastic_half:before { content: ''; position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: #888; } .elastic_half:after { content: ''; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; background: #888; } .fixed { height: 100px; background: #eeddaa; } .footer { height: 50px; background: #ddaaee; } .label { padding: 0 5px; position: absolute; left: 5px; top: 5px; z-index: 1; height: 20px; line-height: 20px; color: #fff; background: rgba(0, 0, 0, .3); border-radius: 3px; } 
 <header class="header relative"> <span class="label">Шапка</span> </header> <div class="elastic relative"> <span class="label">Тянущийся DIV</span> <div class="elastic_half"></div> <div class="elastic_half"></div> </div> <div class="fixed relative"> <span class="label">DIV с фиксированной высотой</span> </div> <footer class="footer relative"> <span class="label">Подвал</span> </footer>

  • Thank you, elegant solution, and with a good design :) It's a pity that calc () is not supported by Opera and IE <9 and IE = 10. - Aluminum Robot
  • @AluminiumRobot "It's a pity that calc () is not supported by Opera and IE <9 and IE = 10." I sympathize with you: ") - Konstantin Basharkevich