All geek questions in one place

How to make an infinite div after a fixed div height?

Say I have 2 Divs.

  • The first has a height of 100 pixels.
  • The latter should go from the end of the first to the end of the site.

I tried everything I know: when I set it to 100%, it takes up the whole site, so there are too many 100 pixels. When I try to do this without setting the height, I get only as much as I write.

+3
source share
3 answers

, , Javascript . , , , IE . , JQuery, div, , , JQuery .

0

position: absolute, , top bottom, div:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body { height: 100%; margin: 0; }
            #felso { height: 100px; }
            #also { position: absolute; top: 102px; bottom: 0; left: 0; right: 0; }
        </style>
    </head>
    <body>
        <div id="felso"></div>
        <div id="also"></div>
    </body>
</html>

. 102px top - , 1px * 2 #felso.

jsFiddle Demo

+1

I do not think this is possible in pure CSS, because you cannot do 100% - 100 pixels. You can use a table 100% high and two rows. Then the first line is 100px and the second occupies the rest of the height.

<table style="height:100%;">
<tr>
<td style="height:100px;">instead of div 1, is 100px</td>
</tr>
<tr>
<td>instead of div 2, takes the rest of the height</td>
</tr>
</table>
0
source

Source: https://habr.com/ru/post/1776179/

More articles:


All Articles