The task is to create a 300x200px rectangle, the top of which ( green ) has an unknown height (according to the height of the content), and the main area ( blue ) occupies the rest of the area of ​​the rectangle both in width and height.
At the same time, the content of the main area can be large both in width and in height, therefore the main area (it is she, and not the whole rectangle!) Should have 2 scrollbars (if necessary).

It should look like this:

enter image description here

Googling on the "div fill remaining height" theme, briskly began to solve the problem, making the display: table container, the main area being display: table-row with height: auto, and in it another div with height: 100%:

<div style="background-color: red; display: table; width: 300px; height: 200px;"> <div style="background-color: green; display: table-row; height: 0;"> Lorem ipsum </div> <div style="background-color: blue; width: auto; display: table-row; height: auto;"> <div style="height: 100%; width: 100%; overflow-y: auto;"> 11111111111111111111111111111111111111111111111111111111111111111111111111<br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> </div> </div> </div>

In terms of height, everything is fine.

Why not say about the width. Which, as is clear from the screenshot, comes out not equal to 300px. Rectangle stupidly stretched in width.

It turns out that a div (display: table-row) absolutely doesn’t care about width: 100% in both its ward div, and if you set it to itself.

Although, if fixedly set 300px to the client, and leave the height: auto div (display: table-row), then he understands this.

But all this layout is not a one-time solution somewhere out there, but a flexible thing for centuries, so the option to set height / width somewhere else is not appropriate for me except in the container. And JS for this does not offer - he is here a crutch.

In my head spinning, that the main area must be enclosed in another container. Still in the head table-cell turns. But what-how-where - I'll never know.

I tried everything, but did not achieve anything new.

  • look towards flex ... my advice to you is Air
  • @Air I am a perfectionist, but he does not work in the old. well him. - DollarDollar
  • @Air it does not work in the old. well him. - DollarDollar
  • @Air another time. in this without flex - DollarDollar
  • @Air and yes, the 21st century began in 2000, not in 2010 :) - DollarDollar

3 answers 3

It?

 .container { display: block; position: relative; width: 300px; height: 200px; } .wrp { display: block; position: relative; width: 300px; height: 100%; } .green { display: block; position: relative; width: 300px; background: green; } .blue { display: block; position: relative; width: 300px; height: 100%; background: blue; overflow-x: auto; overflow-y: scroll; } 
 <div class="container"> <div class="wrp"> <div class="green">Lorem ipsum</div> <div class="blue"> 11111111111111111111111111111111111111111111111111111111111111111111111111<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> 11<br> </div> </div> </div>

  • NO, HERE IS A MISTAKE. The height of the entire container is not 200px, but 200 + green height. I myself had just thought of a solution, which, it turns out, was identical to this (I did not immediately recognize), but because of the same error I threw it into the basket. - DollarDollar
  • Give an example of your answer that you thought up there, I wonder ... - Air
  • @Air yes, in principle, the same as in the response of this chela. although, I still found the code that is the refinement of my first version (from the question (with display: table)), and it solves my problem, so I will study it now, rewrite it, give myself an answer and acknowledge my answer as a solution to my question, well done yourself ^ _ ^ and flex burn in hell - DollarDollar
  • There is no mistake here. The height of the entire container is 200px, taking into account the height of the .green block. Count correctly. - LADYX
  • @LADYX What do you count? I copy the code to my html file, open it with the newest chrome, take a screenshot, paste it into MS Paint and measure it ... Width 300, height approximately 220. - DollarDollar

This solution was created by me based on the code from the network.

It works perfectly correctly (modern Chromium, Safari on OS X, IE10, Samsung Internet on Android 6.0, "Internet" on Android 4.2).

Also, if you specify the width and / or height in percent.

But , if you do not set the height at all, it does not work correctly - only Lorem ipsum is visible with edges cut to its size. We have to remove this very position: absolute. I don't like it, because The component will be used in both modes and it turns out you need a JS-crutch.

And yet, if you do not specify the width, then the width will correspond not to the content of the main area at all - but to the width of Lorem Ipsum. Crutch-treatment - again off position: absolute.

I would like to solve these problems ...

 <div style="background-color: red; display: table; width: 300px; height: 200px;"> <div style="background-color: green; display: table-row; height: 0;"> Lorem ipsum </div> <div style="background-color: blue; width: auto; display: table-row; height: auto;"> <div style="height: 100%; width: 100%; overflow-y: auto; position: relative;"> <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"> 11111111111111111111111111111111111111111111111111111111111111111111111111<br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> </div> </div> </div> </div>

    I suggest using flex:

     <div style="display: flex; flex-direction: column; width: 300px; height: 200px;"> <div style="background: green; flex: 0 0 auto;"> Lorem ipsum </div> <div style="background: blue; flex: 1 1 auto; overflow: auto;"> 11111111111111111111111111111111111111111111111111111111111111111111111111<br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> 11 <br> </div> </div>

    • Better than my display: table solution, but still not perfect. If you remove the width (or width and height), then the width will be 100%, and it would be necessary that in this case it was made according to the size of the content, as well as the height (with height order). This component will work in both modes. - DollarDollar