I am looking for a css way to hav this layout sport a 100% height div, meaning that the white will trail down to the bottom of the document not the window. I would like to do this without images and without javascript.
I've tried html,body{height:100%} which only applied to the window not the doc.
I've also tried to put a 900px body background image and it was not centered with the container div.
Looking at the live site because the URL is conveniently visible inside your image..
Add this CSS:
html, body {
height: 100%
}
#container {
min-height: 100%
}
You'd need something like
<html>
<body style="height: 100%; overflow: hidden">
<div id="realbody" style="height: 100%: overflow: auto">
... page goes here ...
</div>
</body>
</html>
This way you disable scroll bars on the actual page body, and all the scrolling tags place "inside" the document on the "realbody" div. With suitable styling on #realbody, you can make the backgrounds stretch as you need them.
You can actually force the containing div to continue behind your other divs by using special separator divs with a clear: both; set in them. Like this:
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div style="clear:both;"></div>
<div id="footer">
Footer
</div>
<div style="clear:both;"></div>
</div>
Use the where ever you want your wrapper to continue going down.
NOTE: I'm not sure whether W3c says that's good or bad practice, probably bad, BUT it works.
A sticky footer should accomplish this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
the question is a bit old, but, if you don't want to change body and html, and need an element with 100% height without scrollbar you can use this on the div:
#fullHeightDiv{
position: absolute;
height: 100%;
bottom: 0;
}
Hope this can help someone.
Related
I need my bg color to be fixed size and I want my #second-div to start after <hr>.
But this fixed height of bg-color messes up my doc flow and h1-s of the bg-div appear over my #second-div.
Any thoughts how can I fix it?
I've tried using clearfix but it does no help, as bg-div has no floats...
EDIT: to specify - I need those h1-s to overflow the green bg.
WORKAROUND: I've created another div just for fixed-height-bg and then gave bg-div a negative top margin. Visually it satisfies my needs, but wanted to know, if there is a simpler solution.
<head>
<style>
.bg-div {
width: 100%;
height: 200px;
background-color: #00FF00;
}
</style>
</head>
<body>
<div class="bg-div">
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<hr>
</div>
<div id="second-div">
<h1>second div content</h1>
</div>
</body>
codepen link with same html-css to play around
If you really need a fixed background color as part of the layout, I'd try an absolutely positioned div just for that purpose. See this CodePen for reference
<div class="bg-block"></div>
<div class="first-div">
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<h1>bg-div-content</h1>
<hr>
</div>
<div id="second-div">
<h1>second div content</h1>
</div>
.bg-block {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
background-color:#00FF00;
z-index: -1;
}
NOTE:
1. using multiple h1s is usually discouraged, as h1 implies the top hierarchy of the content
2. using an absolute size unit for this type of layout concept is typically less flexible, so I'd suggest you consider other design approach if possible.
if you keep height fixed then the content is obviously going to overflow. That's not good practice do height:100% and see that it fits really well and is dynamic based on the content. Your html should be dynamic because you cannot expect the size of the content in real time.
It sounds like the height you're setting for bg-div is just too small to fit all the H1 elements you're putting inside it. You can make the H1 elements smaller by setting their font-size to something smaller. Alternatively, if you don't care about losing some of the content that you put inside bg-div, you can set overflow: hidden on bg-div. This will prevent the browser from displaying any content from bg-div that would otherwise be outside the bounding rectangle of the div.
Here's the page that I'm having trouble with. You can see that when I scroll down the shadow is in the wrong place. http://michaelaharvey.github.io/
I'm trying to make my page have have box-shadow css property. However, I can't seem to make box-shadow apply to the entire webpage. As a result, when I scroll down there is a shadow in the middle of the page when there shouldn't be. I tried using...
#site-wrapper {overflow: hidden;}
...but that caused my page-jump navigation to break. How can I set the div height of site-wrapper equal to the entire page, including all the overflow? Thank you!!!
You have to make one more element that wraps up the .cover-container
<div class="site-wrapper-inner">
<div class="cover-wrapper">
<div class="cover-container">
....
</div>
</div>
</div>
then place its CSS like
.cover-wrapper {
height: 100%;
overflow-x: hidden;
}
since you use table and table-cell in .site-wrapper and .site-wrapper-inner
so you must add something to wrap the content in order to control its height
I have a jquery mobile page. Even I set the 100% on html and body, the height of html and body is still not the same as its content container (landing-container). For this jsfiddle example, its body's height is about 300px but landing-container's height is about 1600px. I am using Chrome. Why does it happen and is there any workaround?
html, body {
min-height: 100%;
-webkit-text-size-adjust: 100%;
}
<html>
<body>
<div id="holder" data-role="page" data-theme="none" data-ajax="false">
<div class="header">
</div>
<div class="landing-container">
</div>
</div>
</body>
</html>
You can check it out here.
http://jsfiddle.net/angelohuang/brbqh/4/
Its maybe because you have position: absolute on some stuff?
Absolute positioning takes the element out of the normal layout flow, and therefore it isn't affecting its parents' height.
Looks like jQuery mobile is adding many of these styles as a result of the data-role stuff. I'm not familiar with jQuery mobile personally, but perhaps you're using it in a non-standard way?
EDIT
Oh, hahah. This would do it too:
.ui-mobile, .ui-mobile body {
height: 99.9%;
}
that way it never gets more than the window height, unless I'm confused.
I have a variable-height header. I want the content div below it to extend the full height of the window. But if I set the content div to height 100%, the content div goes off screen (because of the header height) and introduces a scroll bar.
I know that this can be done for fixed headers, see (http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/) but I think his method (absolute positioning with top and bottom set) won't work for a variable height header.
There is a solution using table display (http://stackoverflow.com/questions/8555820/) but I want to support IE7.
So to sum up:
Header is variable height
I want the content div to extend to the bottom of the window
I don't want a scroll bar unless it's actually required
I already know how to do this in JQuery if there isn't any pure css solution
Below is example code that shows the problem:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body { height: 100%; }
#header { background-color: yellow; }
#content {
background-color: gray;
height: 100%;
}
</style>
</head>
<body>
<div id="header">
<h1>A Heading</h1>
</div>
<div id="content">
<p>A paragraph.</p>
</div>
</body>
</html>
This might be an over-simplification, but you could fake the content area's height by setting the background-color of the body to the same colour, i.e.: gray.
That way,
Even though the content doesn't stretch to the bottom of the page, it would seem like it does.
When the content does go beyond the vertical limit, the body will stretch with it.
You can use overflow property to remove scroll bar. But your content has to fit one page.
html, body { height: 100%; overflow: hidden;}
Otherwise I think you'll need JavaScript to do that.
Whenever I come across a problem like this, I try to re-factor the page so that the <body> ends up being the full-height element with all the scrolling.
You could position:fixed the header to keep it on top, then allow the body to scroll with the content. You could do the same with a sidebar or other elements.
Have you thought about refactoring your html so that the header is within the "content" div? That way the header will still be variable height and the content div will still fill the page. The only issue would arise if you need to style the borders of your content div. Would something about your intended layout prevent this from being a good solution?
e.g.
<body>
<div id="content">
<div id="header">
<h1>A Heading</h1>
</div>
<p>A paragraph.</p>
</div>
</body>
...and if you're going that far, you could always just remove the content div altogether and place everything within the body, which is 100% height anyway :
<body>
<div id="header">
<h1>A Heading</h1>
</div>
<p>A paragraph.</p>
</body>
Image explanation: http://img219.imageshack.us/f/skrmavbild20110321kl160.png/
I have a background-image that I want on the top of my page, this image is width 800px and height 400px.
Under this image I want another background-image which will repeat vertical (repeat-y) for the rest of the page.
I have tried the following
<div id="bg-static">
<div id="bg-repeat-y">
<div>
Text goes here
</div>
</div>
</div>
The thing is that I want "The text goes here" to float over both element. (See picture, http://img219.imageshack.us/f/skrmavbild20110321kl160.png/)
What should I do to do this?
You are making this seem too complicated, but it's extremely easy.
This is what you need to do:
Your "infinite, repeated" image will go as a site background, like this:
body{ background: url("your-repeated-image.png"); }
Next, create a html like this:
<body>
<div id="container">
any content, text, whatever goes here
</div>
</body>
And just put your 800x400px image there like this:
#container{ width: 800px; background: url("your-top-image.png") no-repeat; }
While testing it, temporarily use this:
#container{ height: 600px; } /* erase after the content is ready */
I think the solution would be the other way around: have the repeating background on the outside div and the fixed height background on the inside div.
Some code on jsfiddle: http://jsfiddle.net/EBK4C/