I'm trying to make a list of slide divs that will have content within them, something quite similar to what the Foo Fighter's have going on, on their website: http://www.foofighters.com/us/discography
The main thing I'd like to figure out is how to have each "slide" auto-adjust to be the proper height when the browser is resized. You can check it out yourself on the discography page I linked. Is there a way to accomplish this? I'm assuming it would be a javascript/jquery thing.
It's important to know that to have a 100% height on a block element, all of the parents must also be set to 100% height.
For example, my if html looks like this:
<!DOCTYPE html>
<html>
<body>
<div id="wrapper">
<div id="myDiv">This is my div!</div>
</div>
</body>
</html>
The CSS required to make myDiv 100% height would be
<style type="text/css">
html, body, #wrapper, #myDiv { height: 100%; }
</style>
Notice all of the parents of #myDiv are also set to 100% height. This is the key to achieving 100% dynamic height for block elements.
An example of getting a div to resize to browser window height:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
background-color: black;
margin: 0;
padding: 0;
}
#mydiv {
height: 100%;
width: 400px;
background-color: white;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="mydiv">TEST</div>
</body>
</html>
Tested in Chrome, IE9, Firefox and Opera, all running on Windows. IE9 required the DOCTYPE to be specified in order to work correctly, the other browsers didn't seem to care.
JQuery alternative: Set DIV height dynamically based on viewport height
Related
In the below lines of html code, the div element extends to the entire height of the page.
Why does adding a <!DOCTYPE html> to it not make it take 100% height of the page? How can I get 100% height while also adding <!DOCTYPE html>?
<html lang="en">
<head>
<style type="text/css">
#menu {
background: green;
height: 100%;
width: 100px;
}
</style>
</head>
<body>
<div id="menu">
Menu
</div>
</body>
</html>
Add the following to your Styles section:
html, body {
height: 100%;
}
The reason your content is not taking 100% height is because it is inherited from its parent element when you use percentages. The parent of div#menu is body, and body has no inherent height. The parent of body is html, and html also has no inherent height. html's parent is the document/viewport itself, which does have inherent height of 100%.
I would also personally recommend that you use an external stylesheet for your CSS, instead.
I'm trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div's are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.
Could someone point me in the right direction how to tackle this with proper CSS? For now I'm not yet interested in a javascript solution. As CSS doesn't provide a clean answer, a javascript solution comes eminent!
This is how far I came:
<div id='header'>Header</div>
<div id='content'>
<div id='innerContent'>
This is the fluid part
</div>
</div>
<div id='footer'>footer</div>
css:
#header {
position:absolute;
top:0px;
left:0px;
height:100px;
z-index:5;
}
#content {
position:absolute;
top:0px;
left:0px;
height:100%;
z-index:2;
}
#innerContent {
margin-top:100px;
height:100%;
}
#footer {
height:400px;
}
EDIT:
I'm sorry, I feel embarassed. I made something similar about a year ago, but at first I didn't think it was possible to adjust it to this situation. Apparently it was.
As I think other's have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it's position when the content div gets larger. Since the footer is absolutely positioned it won't follow the content div's flow, which makes it stay at the same place even though the content expands.
The trick is to wrap everything in an absolutely positioned div. It will expand if it's content gets larger, and the footer div will be positioned according to the wrapper's borders instead of the document's borders.
Here's the code. Try to put a bunch of <br /> tags within the content div and you'll see that everything adjusts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL:
Sadly, css lacks a clean way to do this. You don't know the viewport height (which you called h) and therefore can't calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.
The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
http://browsersize.googlelabs.com/
I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
If I understand your problem correctly I think this might lead you into the right direction.
http://jsfiddle.net/mikevoermans/r6Saq/1/
I'll take a poke at it. Not sure if I read your screenshot correctly but I set the content div to be 50-100px in height.
Here is my jsfiddle: http://jsfiddle.net/AX5Bh/
I am using the min-height and max-height CSS attributes to control the #innerContent div.
If you horizontally expand the result window you will see that some of the text is highlighted . I have set the content to be hidden if it is larger than the #innerContent div. You might want something different. I only highlighted the text with an <em> tag to demonstrate that max-height was working.
If you remove all the text but the first sentence you will see it is 50px in height.
Here is a link to browser support of min-height and max-height: http://caniuse.com/#search=max-height
html:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="qa.css" />
</head>
<body>
<div id="wrap"></div>
</body>
</html>
css:
body {
margin:0;
padding:0;
}
#wrap {
width:750px;
margin-right:auto;
margin-left:auto;
background:#008B00;
}
The html file is called qa.html, and the css file is called qa.css
The two files are in the same directory.
Um... How's the HTML supposed to show anything if there's no content?
[EDIT] To make it more specific and not sound like I'm complaining: put some content in the wrapper div, otherwise it's empty and thus with 0 height.
[EDIT 2]: According to the expected output you describe in the comment, you want the div to take up 100% height of the document. You need to specify this explicitly, ie body and #wrap need to have height:100%. Or even better, min-height.
The div will collapse upon itself if there is no content and no height set. Either put some text or content into the div, or set a min-height or height explicitly.
Edit: please put a doctype in your pages; it helps a lot with expected renderings.
a green div block that fills the middle 750 pixels of the page.
So,
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrap {
width: 750px;
height: 100%;
margin: 0 auto;
background: #008B00;
}
?
In JSF, I am using panelGrid which is equivalent to table in html. How to set height=100% in it? width=100% exists but not height.
Thanks
To start, JSF is irrelevant here. It's now all about its generated HTML code. Open page in webbrowser, rightclick and view source. Concentrate you on that HTML source. That's all what CSS (and JS) can see and apply.
I assume that you mean with 100% height the full viewport height (the "visible" height). Now, to achieve full viewport height in CSS, only setting a height: 100% on the desired HTML element itself is not sufficient. It will be relative to its parent element, all the chain up to the <html> element. So if you basically have a:
<!DOCTYPE html>
<html lang="en">
<head>
<title>100% viewport height demo - FAIL</title>
<style>
.mytable { height: 100%; background: yellow; }
</style>
</head>
<body>
<table class="mytable"><tr><td>cell</td></tr></table>
</body>
</html>
It will be 100% of the height of the <body> element. The height of the <body> itself is in turn relative to the height of the <html> element. But the both elements doesn't have a height of 100%. Copy'n'paste'n'run it. You'll see, it does not cover the full viewport.
If you want to achieve a full viewport height, then you need to apply height: 100% on both the <body> and <html> elements as well (you of course also need to reset the margins).
<!DOCTYPE html>
<html lang="en">
<head>
<title>100% viewport height demo - GOOD</title>
<style>
html, body { margin: 0; height: 100%; }
.mytable { height: 100%; background: yellow; }
</style>
</head>
<body>
<table class="mytable"><tr><td>cell</td></tr></table>
</body>
</html>
Apply this knowledge on JSF as well. The h:panelGrid just renders a <table> element. Its styleClass will be rendered as HTML class attribute.
I'm trying to fix an image to the bottom of the document for a HTML page.
My strategy roughly involves a setting the CSS height of the html node to 100%, and setting the background-position of the background-image to bottom.
This works for pages with a document shorter than the viewport size, but for documents with a length greater than the viewport size, the background is positioned in the middle of the page.
Without knowing whether the document will be longer than the viewport or not, how can I fix the background at the end of the document?
I've managed to get it working as required in Firefox only with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
}
.wrapper {
background: #eaeaea url(ufford-logo.jpg) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
The inline style on the p tag simulates a long document.
This works for me in Firefox 3.5, IE8/7c, Chrome 2. Doesn't work in Opera 10b but I would expect it to work in the stable version (9.6).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
min-height: 100%;
}
.wrapper {
background: #eaeaea url(http://sstatic.net/so/img/so/logo.png) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
I think what you're trying to achieve is very similar to this layout, though in your case you would just stick your image into the footer element (or have it as a background on the footer). If you have a more complex page layout you may be able to adapt the code, or you could try this approach using javascript.
If you want to stick something to the bottom of the visible window, you can do so using CSS. This will work on render (and on window resize).
#specialBackground {
background-image: url(bg.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100px;
z-index: -1;
position: absolute;
bottom: 0;
}
This will place the image where you want it - you will need to change the background-image and the height appropriate to your image. The z-index places the division behind other content, but it doesn't hurt to define the division earlier in your document too (you can define it anywhere and the position will be unchanged).
To keep the division at the bottom of the viewport when the visitor scrolls the page, you'll need to use JavaScript. Example below:
window.onscroll = function() {
document.getElementById("specialBackground").style.bottom =
(document.body.scrollTop * -1) + "px";
};
Hope this helps.
EDIT: I don't know if I made this clear - but you don't use your "wrapper" division to do this - you add another empty division, which get's placed behind the wrapper because of the CSS rules. So you'd have this on your page:
<div id="specialBackground"> </div>
<div id="wrapper">
...