CSS height error - the container will not stretch (no floating)

Here are two links that will display my problem: http://www.wontletthisbeatme.com/information.asp

On the Blog page, you’ll see that the content and containers are separated to the end, even though the content does not require so much space. This puts the footer at the bottom and it looks great. However, in the second channel, the information extends beyond the point of view, and the container headers and footers are not configured to accommodate additional content.

This is a problem that I have encountered for some time and still do not understand the concept. I have a height: 100% are placed on my html and body elements, as well as on my containers, but still remain inefficient with CSS footers. I have looked at many links on the Internet and previous posts, but, as I said, I can’t think about it. Any help would be greatly appreciated.

Update

I made some settings on the pages. Now, the last problem that I see is related to the information page, where the information contained in the contents of the div does not actually stretch the div down. There are no floats and there is no reason why I can see that this div should not be stretched with its contents. Any tips?

+3
source share
7 answers

I think because CSS for footerContainer contains the attribute "position: absolute;". Removing this fixes the problem for me.

The UPDATE . A container (i.e. contentContainer) stretches correctly if you remove the "height: 100%" attribute from it. But then again, I did not analyze the entire layout.

+3
source

This is most likely because the position of the footer div is set to absolute

+1
source

position:absolute . , , , , .

+1

.footerContainer : ( )

+1

, , <div> </div>...

0

:

.clear{clear:both; display:block; line-height:0%;}

.clear

<div class="clear"></div>
0

What you describe is what you want, very similar to the problem expressed in Creating a footer that does not rise above the bottom of the screen without extraneous markup , in which both I and the original seeker, Jason Krista, came up with practical solutions. The link had a special requirement not to use the one div, but I think that the concepts from it should be useful in your application.

0
source

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


All Articles