All geek questions in one place

Div extension at the bottom of the page

I had a problem with a div extension with a gradient background (which is embedded in the body tag) at the bottom of the page when the browser view window is above the contents of the page.

I know that I can set my html, body and the corresponding div tag to 100%, but when I do this, the height of the div tag is equal to the height of the html and body tag, which is set by the size in the viewport. This either creates too much space in the div below the content contained in it (if the viewport is too large), even if the viewport is NOT above the page. Or it cuts off the contents in a div and the viewport will not scroll down (if the viewport is small)

You can see this problem at matthewelliot.com . If you zoom out to 25%, you'll see that the white gradient at the bottom is broken into a background image when the contents fill a div with an additional gradient. You may ask: “Well, who will do this? But I noticed this problem when I visited the site on my iPhone, holding his“ portrait ”, and I’m sure that many others will have the same experience.

Let me know if you need another diagnostic code!

+4
source share
2 answers

A quick and dirty fix would be to put your high-level divs (title_bar, nav_bar, etc.) into the wrapper div, apply the background to the wrapper and make the background color of the body white. But I'm sure there is a pure CSS3 solution. I will try to find him.

+1
source

What you are looking for is a sticky footer:

* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer height */ } .footer, .push { height: 142px; /* .push must be the same height as .footer */ }

Please take a look at this: fooobar.com/questions/80179 / ...

EDIT:

Try the following:

Create a new DIV for the body tag as follows:

 <body> <div class="body2"> PUT ALL OTHER DIVs AND CONTENT IN HERE. </div> </body>

And for CSS like this:

 body { background-color: #FFFFFF; } .body2 { background-image: url(../_images/bg/bedge_grunge.png); background-repeat: repeat; background-attachment: fixed; }

As you can see the result in this jsfiddle (using the original content minus css and images): http://fiddle.jshell.net/zbaBZ/show/

+1
source

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

More articles:


All Articles