Using blueprint.css, is there a way to stretch a <div> to the height of the page? I know how to do it in pure CSS, but nothing I've found suggests how to do it with blueprint, so I'm left with a <div> that has a background that stops halfway down the page (which looks terrible).
There isn't a Blueprint class for this and a quick grep will show that the necessary CSS doesn't show up in the project.
Compass handles it with a set of stretch mixins. stretch-y adds the following CSS to the element:
bottom: 0;
position: absolute;
top: 0;
Since absolute positioned elements don't interact with floats, you'll need a in a div with the background-color that you want and the appropriate width (i.e. give it the right span-# class).
The purely presentational div feels like a hack, but I like it better than the Faux Column method.
You might want to to include:
html, body {
height: 100%;
}
and the following for your container, to give it 100% height and so the div's absolute positioning happens inside of it:
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
and maybe even this IE hack, though it might only be necessary with a footer:
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
Related
I assumed until now that by default, according to the normal layout behavior, the <body> element filled up 100% of the height of the container <html> element even when position: static was set.
However, a simple experiment proved my assumption wrong and I was shocked.
I do understand that in the normal layout behavior, block elements' heights are elastic and stretch to fill their entire contents. However, for some reason, I thought this did not apply to the <body> element.
So, in my simple experiment, I have the following HTML:
html {
background-color: white;
}
body {
width: 50%;
background-color: gray;
margin: 0 auto;
min-height: 100%;
height: 100%;
/* position: absolute;
left: 22%; */
}
<h1>Nice sounds</h1>
<p>Zoo zoo zoo</p>
<p>Koo koo koo</p>
<p>Boo boo boo</p>
<p>Poo poo poo</p>
If I leave the position: absolute; commented as it is just now, then by default, in the static layout, the body behaves just like any other block element and is only as tall to fill up its contents, ignoring the rules height: 100%; and min-height: 100%. It looks like the picture below.
If, however, I change the positioning to absolute, i.e. if I uncomment the following:
position: absolute;
left: 22%;
Then of course, it obeys the height: 100%; min-height: 100% rules. It then fills up the entire height of the browser like so:
Is this the normal behavior? Does the <body> element behave just like any other block element with respect to its layout rules, esp. with respect to its height?
TL;DR: Yes, this is the normal behaviour.
However.
Once upon a time, there was an older standard where body did have the height of the viewport by default. Long ago.
Also, some obscure features of HTML may confuse matters. If you do not set the background-color property of the html element, the background of body will be "inherited" by html, so that the whole window has this background, making it look as if the body takes up the whole window, which isn't the case!
When it's static it has a parent which is html and when you use static positioning in that case it thinks within the parent. html by default as any other block has height: auto so if you change that to 100% it becomes as you expected.
body has a parent html and build its sizes according to its parent.
I need my content column to expand to the bottom of the page when it's content is shorter than the viewport, but still expand when the content is longer. The column has to come down a little ways from the top of the page.
Here is the HTML for what I described:
<html>
<body>
<div id="content">
<p> asdf ghjkl </p>
</div>
</body>
</html>
Here is the CSS
#content {
min-height: 100%;
margin: 100px 0 0;
}
The issue with this method though is that min-height: 100%; does not take padding into account so the page is always bigger than what I want.
This is the behavior I am seeking:
Is there any way to accomplish this without using Javascript?
Absolute positioning can do this for you:
First remove your min-height and margin then apply this rule to your CSS.
#content {
position: absolute;
top: 100px;
bottom: 0;
}
In CSS3, you can use box-sizing
By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Ok blokes and birds, here's what I ended up doing. Instead of solving the problem directly, I added a few fixer divs.
First off, here are a few observations:
We know that when #column is longer than the viewport, the length of #column needs to specify the height of <body>.
If #column is shorter than the viewport, the height of the viewport needs to specify the height of <body>.
The column needs stretch to the bottom of the page under all circumstances, regardless of how long it's content is.
For the first criteria we need to make sure that height: auto is set on <body>. Height defaluts to this if it's not set. We also need to make sure that #column has height: auto; and overflow: hidden; so that it expands to the size of it's content.
For the second criteria we need to set position: absolute; and min-height: 100%; on <body>. Now the length of <body> will expand when #column is longer than it, but won't go shorter than the viewport. This next part is where the fix comes in.
For the third criteria, the trick is to add some extra divs and give them some special css. In my HTML I added two divs right outside of #column.
<div id="colhack-outer">
<div id="colhack-inner">
</div>
</div>
<div id="column">
...
</div>
For the outside div you postiion it absolutely and set it's height to 100%, force it to use an alternative box model and shift it's content area using padding. You apply all your column styling (background color, border radius, shadow, etc.) to the inner div. Here is the CSS I applied to them:
#colhack-outer {
height: 100%;
padding: <where you want to shift the column to>;
position: absolute;
width: 50%;
}
#colhack-inner {
height: 100%;
width: 100%;
background-color: #303030;
}
You also have to make your actual content container use that special box model and shift it with padding too:
#contentbox {
position: relative;
padding: <where you want to shift the column to>;
width: 50%;
color: #EEEEEC;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Live example here: http://nerdhow.net/
post a comment if you have questions or if something wasn't clear.
You can achieve it by using Absolute positioning and adding extra block (if you need a solid background under you column).
So, when you'll have a little content, you'll get http://jsfiddle.net/kizu/7de7m/
And if you'll have a lot of content, you'll get http://jsfiddle.net/kizu/7de7m/3/
Try this jsFiddle: http://jsfiddle.net/8R4yN/. It seems to work the way you want. I took some tips from: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/. It looks like the overflow is causing the hiding, and the #content inside there is also not helping out :).
I would like to have an IFRAME dynamically sized using the following CSS:
#myiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
However, no browser seems to support this.
In good browsers I could wrap the IFRAME in a DIV with the quoted CSS style and set the height & width of the IFRAME to 100%. But this does not work in IE7. Short of using CSS expressions, has anyone managed to solve this?
Update
MatTheCat answered with a scenario that works if the IFRAME is located directly under the body and the body/html tags have height: 100% set. In my original question I did not state where the IFRAME was and what styling applied to it's container. Hopefully the following addresses this:
<html>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
and let's assume the following container CSS:
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
if you now place height: 100% on the IFRAME it will not size correctly.
Use a div for the padding on all sides. Place the iframe in it using 100% of its parent div.
http://jsfiddle.net/sg3s/j8sbX/
Now there are a few things you need to remember. An iframe is originally an inline-frame, so while modern browsers don't care, set display:block on it. By default it also has a border. Any stying we want to be done needs to be done on the iframe container instead or we'll break the 100% container boundry.
And this is how we would put an element above it:
http://jsfiddle.net/sg3s/j8sbX/25/ (edit: my bad, you actually need to set border=0 on the iframe for IE7)
Should work fine in IE7+ (IE6 doesn't like absolute positioning + using top/right/bottom/left to give it layout)
Edit Some extra explanation
We need to style the iframe container mainly because an iframe on itself doesn't let itself be sized with top/left/bottom/right. But what will work is setting its width and height to 100%. So starting from there we simply wrap the iframe in an element which we can reliably style to make less than the window 100%, the size which elements default to when none of their parents have a static height/width.
Thinking about it we can actually drop the absolute and block. http://jsfiddle.net/sg3s/j8sbX/26/ Might want to doublecheck IE7 on that though.
After we make the iframe 100% high and wide we cannot put any margin, padding, or border on it because that will be added to the already 100% height & width. Thus making it larger than its container, for divs that will result in an overflow:visible, simply showing everything going over the edges. But that in turn would mess up the margins, paddings and offsets we gave our elements.... In fact to make it be only the 100% height and width you have to make sure you removed the iframes default border.
Try it out by adding a larger border (like 3px) in my example to the iframe, you should easily be able to see how it's affecting the layout.
Why don't you use height & width? You'd still get an absolute position by setting top/bottom & left/right, as in the example below.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0px;
height:100%;
width:100%;
}
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
#myiframe {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
This works for me (Tested on IE9).
html,body {
margin:0;
padding:0;
height:100%;
min-height:100%;
}
#myiframe {
width:100%;
height:100%;
border:0;
}
work fine for me even with IE7.
I would say take a look at this stack overflow question. It might help:
Make Iframe to fit 100% of container's remaining height
You can try to use this:
document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';
it can be done using javascript, but with CSS alone, is it possible to style a div to overlap exactly any page's document content or viewport (to apply an opaque gray layer on the page)? since a page can have margin for it body element, so styling a div to the width of its body element won't do. (needs to work in IE 6 too)
IF you have a <div> like this:
<div id="cover"></div>
These styles should do it:
#cover {
background-color: #ccc;
opacity: 0.6;
filter:alpha(opacity=60);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Tested on a page where the body has a margin and it covered the entire viewport for me on IE and FF.
height: 100% won't cover the viewport if document length is less than height of viewport. In this case you will have to use Javascript.
would it be cheating to use IE's ability to execute javascript in CSS?
width:expression(document.body.clientWidth)
I have an IE6 absolute position div that I want to be full screen (100% width and height). It's being used as a "loading, please wait" message while the data loads on the page.
It appears that ie6 does not recognize the css of "height:100%".
Any work arounds?
Also, in some older browsers you need to set the height of the html tag as well:
body, html {
height: 100%;
}
Height 100% on a div needs it's parent to also have a height defined in IE6. Try this:
body{
height:100%;
}
Also, and this might have flaws of its own, you could do the following:
#fullScreenDiv {position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
It'll maybe screw with nested components and their floats and so forth, but it would definitely, with a doctype, make the div full screen.