SOLVED
I used the solution proposed by Roman below, based on adding an additional DIV with position:absolute, I tested it in IE7, IE8, IE9, Chrome and Firefox and seems to work fine!
So the layout now has 3 full background images (what I needed), and even you can use the BODY bg taking care of that will be cutted off to the browser's viewport height (still could be useful in some cases), "three and and a half" bg images with "sticky footer" :)
The only drawback I found its that the links in the #footerContent were not "clickable", I solved it using position:relative to this container.
I made the changes to the sample I provided and uploaded it to my Dropbox, In the case that someone else could find it usefull.
Thank you all for your answers.
http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar
I uploaded
I'm building a quite complex layout for a website where I need to have 3 background images covering the background of the web page. So I have one in the HTML style, one in the BODY style, and the final one in a DIV that it's the container for all the webpage elements (#contenedor)
I'm also sing a "Sticky footer" technique, to have the footer "glued" to the bottom of the page whern there are small contents in the "main content" area.
The problem that I have It's that the BODY bg image gets cut off to the viewport of the web browser, I mean, It doesn't repeat-y below the visible area displayed when the page is loaded, and the contents are "tall" enough to make the webpage scroll.
What I tried until now:
To add an additional container DIV surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).
Force the BODY to be as tall as the HTML using:
html>body {
min-height:100%;
height:auto;
height:100%; }
This solves the BODY issue, the image repeats but this also breaks the "Sticky footer"... :(
You can see a sample:
Index with "small contents" all OK... footer on bottom, etc.
http://carloscabo.com/bg/index.htm
Index page with tall contents (simple BRs), scroll down to see the cut on the BODY bg Image
http://carloscabo.com/bg/index_tall.htm
You can also download all the files of this sample in the following URL to do your own local test.
http://carloscabo.com/bg/stackoverflow_html.zip
For a reason I don't quite catch, it seems that the body is stuck with a height of 100% of the viewport. It refuses to grow past this point, and does not inherit the real height of the whole page.
However, if you don't mind to add another helper div, you can easily solve the problem.
First lets start with the html:
- Add a helper div before the head section.
<div id="contenedor">
<!--HELPER DIV GOES HERE: BACKGROUND FIX-->
<div id="bgfix"></div>
<header id="arriba">
...
</header><!--header#arriba-->
...
<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->
And now let's modify the CSS:
- Remove the background from the body, and put it into the new helper div like so.
body {
height:100%;
min-height:100%
text-align:center;
// background:url(../img/bg_body.png) center top repeat-y;
color:#fff;
}
#contenedor {
position:relative; /* For #bgfix to attach here */
...
}
#bgfix {
background:url(../img/bg_body.png) center top repeat-y;
position: absolute;
width: 100%; height: 100%;
z-index:-1;
}
And VOILA!
Hope it helps!!!
The solution I found for this problem is to set min-height to the
min-height: 900px;
900px was the actual height of the background image i used.
I would need to see exactly what do you want to accomplish in order to help you better,
but i will make my best giving you some tips in advance
you shouldn't be applying a background to the HTML tag.
dont play with the height property of your body, it will mess up the sticky footer, instead let body height grow naturally with content.
body will grow with the content, but html wont. html tag IS NOT a container.
Related
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
I've read every post and google result about footer's height but I'm not able to fix this issue.
You can see my index here:
http://adamaweb.com/faqme/
As you can see, I want the footer extends to the end of the page. It's not a sticky footer, I just want it to extend.
But when you load the web you can see a big vertical scroll.
I thinks it appears because of the height:100% in the footer.
It is possible to extend the footer without the scroll issue?
You can put the dark footer background on the body. Then you need to add a 100% wide wrapper for the page content and use the light background on the new wrapper.
And yes, as per comments, you need to remove height:100%; from the footer.
Just set your html background to the same as your footer:
html, body {
margin:0;
background:black;
}
I have seen a website using google chrome that they put the CSS Background Property in the HTML tag like this:
html { background: #eee url('../img/bg.jpg') center center repeat fixed; }
Is it ok to do that or should i put it in the body?
It doesn't really matter on which you put the background, both work equally good, but there is a gotcha.
If you put the background on BODY only, the background will stretch the whole height of the screen, even if there's no content on the page, but if you put it on both HTML and BODY, the background on BODY will only be as high as your content inside it, just like on any DIV.
I often use backgrounds on both when there's a need for two background images as this eliminates the need for unnecessary DIV wrappers.
lea.verou.me puts it on the html tag. If it's good enough for her, then it's good enough for you. ;)
You might want to throw height: 100%; in there too.
I would suggest putting a page wide background image on the body tag.
<body>
And in your style sheet you can then specify a background
body
{
background-image:url('blah.jpg');
}
A page I'm working on has a div that spans its width. Its height has to resize according to the browser window. Here's how I've got it so far:
#vid_window{
position:absolute;
float:left;
background-color:#000;
width:100%;
height:57%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
At the bottom of the page is a 'menu' to play an assortment of videos in the above div, and the video, of course, will have to resize with the height of the div. The div is absolutely positioned, per the client. That's not a problem:
#vid{width:100%;height:100%:}
As it will fill #vid_window
Here's the problem: When the browser page resizes, it doesn't take long for the 'menu' to begin overlapping the vid window. I know I can reduce the percentage, but, I may not, per the client. They want the lion's share of the page to be able to display the video, but they, of course, don't want the menu to overlap the window or the vid.
Here's the question: Is there a way to have the vid_window and vid resize exponentially according to the browser window, such that if the window is fully expanded, the vid_window is at 57%, but if it's half-size, the vid_window would be, say, 30%?
Here's a link to the page, if you'd like:
page
From what you've described, it sounds like you'd be better off absolutely positioning the menu at the bottom, and using relative postioning on vid_window. With a little JavaScript you can resize it correctly, and it should resolve your overlap issue. If you're allowed to use it, you can make quick work of it with jQuery.
Like James says the best way I can think of for you to do this is set a class on the Div vid_window set the height % in the class and check the display window size to determine your optimal settings. Also I would probably set a min-height so that the page won't go below that height and for backwards compatibility look at Modernizr. http://www.modernizr.com/
------EDIT------
That the Header and footer will never be off of the page. One way to reduce the problems you are having is setting the height on the header and footer to percentages so that they will scale with the height of the body
html,body { height:99%; min-height: 100%; }
header { height:22%; min-height: 100px; }
#content { height: 56%; min-height: 200px; }
footer { height:21%; min-height: 100px; }
The min-height values can be whatever you think is appropriate for the smallest height you want to go. The percentage heights on the rest should auto scale you header footer and consequently your content. This will however force the footer to go off the page at a certain point (when all min widths are met and the browser window continues to shrink). I do think that this would be desirable and should meet your clients needs. If not then you are going to get into a very complicated javascript that is not always going to do the math just right because of how each browser handles padding and height calculations. On top of that if they disable javascript then it would never work.
In my page there's only one image. Kind of 1500x3000 px.
In the printer, I need that this image's maximum width to be the width of the page, so I did: width 100% in the css, and it works.
But the height... the old bullshit of height 100% will never work. Because it always will be 100% of the parent container, then someone must have height defined. Or html or body.
So, my question is: make this image fit in one page.
Any ideas?
One way to do it would be to perform some calculations to find out what width would cause the length to be exactly one page, and then set your width in the CSS accordingly.
If I understand this right, could you do
.OnePageImage { height: 100%; width: 600px; }
Where 600px (the width) is the total width of the page. Then the image would fit on one page (albeit with some distortion potentially). You could also add a css page break style to a div before and after the image, which is done like this:
.break { page-break-after:always; }
Then the code would look like this:
<div class="break"></div>
<img src="[your image src]" class="OnePageImage" />
<div class="break"></div>
The only thing that limited the print output to a single page for me was setting the height in cm of a container element that wrapped the entire page, and also setting it's overflow to hidden. For some reason this didn't seem to work on the body element.
body > section {
padding:0 !important;
margin:0 !important;
height:25.7cm !important;
overflow:hidden !important;
}
Incidentally, I had hoped that setting page-break-inside to avoid on the body or the container element might have been the solution to limiting to a single print page but that doesn't seem to have any effect at all.
Ok sorry for putting the "solution" as a comment:
What I've ended up doing was assume that 99% of the clients (that's true) they use a single page size. So I put some warning in the print interface that will only work with the page size "X". too bad. but it's working out so far