Gentlemen, there is such a markup:

<div id="container"> <div id="first"></div> <div id="second"></div> </div>

I want to do something like this:

 <style> #container { height: 600px; } #first { height: 60px; } #second { height: /*все остальное*/ } </style>

So, is there a way in CSS to set the height of the second block as the difference in height between the container and the first block? At least if the height of the first block is fixed.

    2 answers 2

    Example

     #container { height: 600px; position: relative; } #first { position: absolute; height: 60px; } #second { position: absolute; top: 60px; /* высота первого блока*/ bottom: 0; /* прижимаем к низу*/ }
    • OK, and if you need to swap first and second, and everything should be aligned relative to the container? - dm_panyushkin
    • Change calmly. The second already has indentation from above to the height of the first container, just in the first list write another top: 0; and everything - ReklatsMasters

    There are options, it all depends on the requirements for cross-browser compatibility, the beauty of the solution and the use of js.

    Here is one example of a solution:

     #container { height: 600px; } #first { height: 60px; float: left; width: 100%; } #second { height: 100%; }
    • I understand correctly that with this method, #first is displayed on top of #second, but its "height" attribute remains 600px? - dm_panyushkin
    • Why not? jsfiddle.net/pcv66/9 . About the attribute did not quite understand. - goozler
    • I mean that's what jsfiddle.net/ZpHcd - dm_panyushkin
    • I understood, unfortunately, I don’t know all the details of the rendering of this example. The height of the second element will be taken as the height of the parent, but, nevertheless, it is not under the first block and is displayed after it. In this case, with a float: left, the container simply does not swell if the content does not fit. - goozler