Is there a way to have a gradient match the actual height of a web page?

@ralphm

Ok! Then I’ve done something incorrectly. I’ll go back and chek my work.

Thanks again.

1 Like

@AirFor

Ok here is my code:

HTML:

<div class="majorContent">
...
</div> <!-- /end of .majorContent class -->

CSS:

body {
        font-size: 100%;
        font-family: "Source Sans Pro", sans-serif;

        /* from Ralph -------------------------- */
        color: white;

      /* https://css-tricks.com/examples/CSS3Gradient/ */
        background-color: #1a82f7;
        background: url(images/linear_bg_2.png);
        background-repeat: repeat-x;

        /* Safari 4-5, Chrome 1-9 */
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

        /* Safari 5.1, Chrome 10+ */
        background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, #2F2727, #1a82f7);

        /* IE 10 */
        background: -ms-linear-gradient(top, #2F2727, #1a82f7);

        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #2F2727, #1a82f7);
  }

.majorContent { 
      font-size: 1.1em;
      /*font-family: "Source Sans Pro", sans-serif;*/
      font-family: "Times New Roman", serif;
      color: rgba(2, 23, 37, 0.9);
      letter-spacing: 1px;
      line-height: 1.3em;
      width: 90%;
      max-width: 900px;
      background-color: #D8D8D8;
      margin: 0 auto;
      padding: 2% 5% 5% 5%;
      text-align: justify;
      border: 10px solid #C0C0C0;
  } 

I’m going to try and put this page online then you will be able to see how it actually repeats.

Thanks!

Edited with code tags

Post your code which it isn’t working in.

Here is the link to the page which is now online: http://www.pabriles.com/handTools.html

You will have to excuse the CSS bloat as it is still not ready for prime-time.

Thanks!

Remove the height set on the body.

html, body {
height: 100%;
}

Edit to clarify: Line 162 in majorStyle.css

@AirFor

Got it! Thanks a MILLION for your help. I changed it and worked perfectly.

Pizza’s on the way.

I sicerely appreciate your help.

Question: I am assuming that - height: 100% - refers to the height of the browser and not what is below it. Is that correct? Thanks!

All good, keep up with the learning.

Yes it refers to the browser height being 100% if you set html (this is the whole document). Some more information about it can be found here - http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height

@AirFor

As much as I truly enjoy learning HTML/CSS there are a lot of 100% this and 100% that rules that get a bit confusing, to me anyhow. I have a ton to learn, but could never advance without the help of individual’s such as yourself and other’s in this forum you give so freely of their time and expertise.

Thank you once again for all of your time and advice.

1 Like

No problems. I wouldn’t specify a height on anything unless absolutely necessary but that’s just me.

1 Like

@AirFor

I’ll remember that bit of good advice. I also just documented what I learned here today in my folder .doc.

Live and learn. Thanks!!

That’s not quite right as height:100% on the body is often misunderstood. If you have a wrapper div in the page that you want to set to height:100% (e.g. for a sticky footer approach) then you must set html and body to height:100% (not required for the new vh units although some older versions of webkit still needed the fix below to work properly).

html,body{height:100%}

If you set body to min-height:100% instead of height:100% (as mentioned in the link above) then the first wrapper in your page cannot inherit any height from a min-height element and will be height:auto. Therefore the rule must be as above unless you are using the body element as your first page wrapper (which is fine for modern browsers but historically caused problems in older versions of IE and even modern versions of IE zoom incorrectly when the body is used as sized wrapper). For the sake of all those bugs then one extra wrapper is worth the price to pay.

The problem with using html,body{height:100%} only really occurs when using linear gradients on the body because the gradient will only stretch to 100% of the viewport and will not wrap the content should it go below the fold (this doesn’t happen with background images or colors).

In the page above ( http://www.pabriles.com/handTools.htm) with the 100% height removed the gradient now encompasses the content however if you shorten the content to a few lines you will see that the gradient now repeats from the bottom of the content rather than stretching down to the bottom of the viewport. This is not a nice effect and probably not what was wanted.

There are two methods to overcome this and one would be to set html to have a min-height of 100%.

html{min-height:100%}

This would allow the gradient to reach the bottom of the viewport on short content pages but also to keep track with the content as required. Unfortunately this does raise another issue in that on very long pages the gradient becomes stretched all the way down the page and so may not seem like much of a gradient at all.

My preferred approach is the set html and body to height:100% and then set the background-attachment to fixed on the body element which means the gradient will only ever be as tall as the viewport but of course will not scroll away. This means you get a full height gradient at all times no matter how much content you have.

As far as height:100% itself goes then you only need to understand that for an element to have its height defined in percentage means that the parent of that element has either a fixed height in pixels/ems/% (min or max-height is no use). However if the parent has its height in percentage also then the same rules apply for that parent and the unbroken chain of heights needs to be maintained right back to the root element.

In most cases height:100% is unnecessary and unwanted. The only time you really want to use it is on the html and body elements and only then if you want 100% high element in your page to start with (or for the linear gradient fix I gave above). Most other times you don’t need it.

Also note that when you set an element to height:100% then it remains at 100% height and cannot grow with content (unless it is display:table). Effectively this is what happens to the html and body element when we set height:100% and the content just overflows the body. This usually has no ill effect because backgrounds are still propagated below the viewport even with the height:100% set (except for linear gradients which seem to abide by their own rules).

It is well worth understanding the implications of height :smile:

4 Likes

@PaulOB

Thanks for the indepth explanation.

I have pasted your post into my CSS log book for future reference. As you noted so succinctly, the height: 100% is confusing to say the least. I have not fully grasped all that you have noted, but I will in time. None of this would have mattered to me had I not wanted to use a gradient in my new website. That said, i am very glad I did because, once again, I have learned a lot in this forum.

Thanks again for an extremely informative post.

1 Like

Thanks for the detailed clarification, Paul. Great post. I’ve updated the Pen above to reflect your suggestions. :wink:

In my experience, there are only 2 times height 100% is actually useful for anything;

  1. Inside an element with display:table-cell
  2. Inside an element that has position:relative, position:absolute, or position:fixed

Let’s say you have this HTML:
[div class=“outer-parent”]
[div class=“parent”]
[div class=“child”] test [/div]
[/div]
[/div]

(Yes they are the wrong sort of bracket, the pointy ones wouldn’t display)

You can do this with the CSS:
/* option 1*/
.outer-parent { display:table; }

.parent { display:table-cell; }

.child { display: inline-block; height:100%}

/* option 2 */
.parent { position: relative; }

.child { position: absolute; height: 100%; }

Off Topic:

You need to use Markdown to display HTML code as such. Forum Posting Basics - #6 by James_Hibbard explains how.

I’m not being picky here (as this is a complicated subject) but for further clarification :smile:

height:100% inside a table cell will only work if the parent has a height defined (as mentioned in my previous post) and that parent’s height is not a percentage (unless there is an unbroken change back to root (see caveat for tables below)).

Essentially a table-cell is always 100% high as it will match other cells height automatically so the only time you need height:100% on a table-cell is when you have a nested element and you want that nested element to stretch the full height of the cell in order to match the height of other cells in that row.

In order to do this in a cross browser way you would need to give the parent table element a fixed height (height:1px will suffice as height is a minimum on tables). height:100% on the table will work in some browsers and not others unless there’s is a full chain of 100% back to root (and in which case you get a table stretching from top to bottom of the viewport which may not be what you wanted).

This will not work unless there is an unbroken chain of height:100% back to root or back to a table element with a height defined.

Your final comment about absolute elements is correct though and an absolute element will always base its height on a relative parent and keep track. (It would be of limited use though (although there are special cases) for placing content in the absolute element as in most cases the parent would have no height unless other non positioned content was present).

I only used the table cell height:100% thing for the first time just recently when the position:relative position:absolute height:100% combo wasn’t working on a div inside a table cell.
I was going off memory so I might have missed bits but I’m pretty sure I didn’t have to set a height value on the table.

There’s loads of things you can do with position absolute! Especially if you combine it with :before and/or :after pseudo elements.
You just need to be a little clever. :wink:

You can do things like:

  • create custom dot points for list items
  • create custom check box and radio buttons
  • vertically center align an element that has a fixed height
  • create box shadows that only go in one direction (clue: it’s not actually a box shadow, it’s a gradient in a pseudo element)
  • create file type icons next to download links
  • add tool tips to links

I LOVE position absolute :blush:

Sorry. Going off topic. All of that is more advanced sort of stuff. For beginners, position:absolute is pretty dangerous. :confused:

Try it and see :wink: I can assure you you will need the format I posted above for a cross browser solution.

Yes of course. :smile:

I was just pointing out the pitfalls of tracking relative content. I have used position:absolute for all the things you mentioned and its a very useful tool in the toolbox when used in the right places. Indeed about 10 years ago I used it for my absolute overlay technique for faux columns.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.