I would like to have a web page with a header 120px tall, a footer 120px tall,
and a main content whose minimum height is 600px but when the browser is then
stretched vertically past 840px in height (or the user zooms out with
"control minus" on Firefox), I want the body to stretch vertically
to fill all available space minus the header and footer space.
Here is what I tried:
<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>
and this is the CSS:
header { height: 120px; background: red; }
div#mainContent { min-height: 600px; height: 100%; background: green; }
footer { height: 120px; background: blue; }
Here is the complete code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
header { height: 120px; background: red; }
div#mainContent { height: 100%; background: green; }
footer { height: 120px; background: blue; }
</style>
</head>
<body>
<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>
</body>
</html>
What is the correct way of achieving the effect I'm after.
Thanks.
Change the body size to a percentage you cant have a px size and percentage they don't work together.
div#mainContent { height: 100%; background: green; }
Related
I have created a sticky footer, a footer that hugs the bottom of the window whether or not there is enough content to fill the page. My implementation works well except for one minor issue when rendering in Internet Explorer. If the content fills the page and any of my content divs have an unspecified height, a crack appears beneath the footer. This also happens if the content contains a span with or without a fixed height.
Below is my implementation. If I give Div 2 a fixed height the footer tightly hugs the bottom of the window, but by not setting a height the crack appears. I have been unable to resolve this. Any suggestions on how to prevent it would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sticky Footer</title>
<style type="text/css">
Html, body {
margin: 0;
height: 100%;
background-color: lightgreen;
}
header {
height: 40px;
background-color: green;
}
footer {
bottom: 0;
position: absolute;
width: 100%;
height: 40px;
background-color: gray;
}
.fixedHeightDiv {
border: 2px;
border-style: solid;
height: 500px;
}
.container {
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<div class="content">
<div class="fixedHeightDiv">
Div 1
</div>
<div>
Div 2
</div>
<div class="fixedHeightDiv">
Div 3
</div>
</div>
<footer>Footer</footer>
</div>
</body>
</html>
Have a problem trying to have a header tab strip occupy the entire width of the browser. Below is the code. When the page is viewed in a browser, I see a horizaontal scroll bar for the browser, so, when you scroll over to the right, the bluish tab cuts out, revealing the white background.
How can I have this header tab expand when scrolled over too?
THanks.
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
html, body,form, #wrapper, #left, #right { height: 100%; min-height: 100%; }
#wrapper { margin-left: 10px;overflow: hidden; width: 100%; }
#left { background: yellow; float: left; width: 360px; }
#right { background: grey; margin-left: 360px; }
</style>
<title>Example</title>
</head>
<body>
<div id="tabstrip" style="height: 25px; background-color: #63a3c7; color: White;">
</div>
<form id="form1" runat="server">
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</form>
</body>
</html>
It's coming from the margin-left: 10px; on your #wrapper. Remove it and the problem goes away.
jsFiddle example
If for some reason you need that bit of margin there, put it on the form instead.
See this. I removed the wrapper width 100%.
#wrapper { margin-left: 10px;overflow: hidden; }
Hope this helps!
Code:
<html>
<body>
<div id="header">
</div>
<div id"content">
Some random content
</div>
<div id="footer>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
width:960px;
height: 100%;
margin: 0 auto;
}
#header {
height: 100px;
}
#content {
min-height: 100%;
}
#footer {
height: 100px;
position: relative;
bottom: 0;
}
Problem:
For what I have been reading, this code should do the height of the content div take all the height of the window even if the content it's smaller. The problem is that it makes it take more than the window height, even with a very small content.
I don't understand how the content can take more than 100% height and how can I fix it.
It's working fine, you're misunderstanding how it should work. You have header and footer set to 100px so the site is actually adding 200px to the entire page.
If that is a copy and paste you have html errors too, your content div is missing an= sign and the footer div is missing the closing "
What you want is a wrapper and position fixed on the footer not relative.
http://jsfiddle.net/calder12/ghDUd/1/
it take more than 100% because the header is having 100px as well, so the page has a 100%+100px total height, put the header inside the content wrap, that would be a quick-fix
Assuming proper code:
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body{
width:960px;
height: 100%;
margin: 0 auto;
}
#header{
height: 100px;
}
#content{
min-height: 100%;
}
#footer{
height: 100px;
position: relative;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="content">
Some random content
</div>
<div id="footer">
</div>
</body>
</html>
content div does have 100% of window height. That means it ends 100px (header's height) below window height. If you want footer to be always on the bottom, you should use position: fixed; bottom: 0 on footer.
I am having trouble preventing a DIV from wrapping to the next line when I shrink the browser window. There must be something small and simple I am missing, but I've been at it for a while now and I cannot figure it out. It appears to only kick down the "blog" div, but not the "info" div. Any suggestions?
Here is an example:
http://www.spynsycle.com/portfolio/
CSS:
/* Level 1 */
#container {
min-width: 800px;
width: 100%;
min-height: 768px;
height: 100%;
background-color: lightgrey;
}
/* Level 2 */
#portfolio {
min-width: 396px;
width: 40%;
min-height: 768px;
height: 100%;
float: left;
background-color:lightgreen;
}
#information {
min-width: 108px;
width: 20%;
min-height: 768px;
height: 100%;
float: left;
background-color: lightcoral;
}
#blog {
min-width: 396px;
width: 40%;
min-height: 768px;
height: 100%;
float: left;
background-color: lightblue;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="portfolio">
Port
</div>
<div id="information">
Info
</div>
<div id="blog">
Blog
</div>
</div>
</body>
</html>
Because you're assigning min-width in pixels, as your page gets smaller, eventually you're running out of enough pixels to maintain the sum of your widths, and you browser is forcing your blog div to wrap. Your widths are totaling to 900px, so once the browser window dips below 900px you'll start seeing wrapping.
What's happening is eventually your min-width of 396px becomes larger than 40% of the browser width.
I want is this:
the blue area resizes with when the browser window resizes.
The header is visible.
the blue area starts where the header finishes (not behind the header or above).
the blue area ends before the footer.
between the blue area and the footer exist 5 yellow pixels.
Is this possible only with CSS and HTML ( without any javascript ) ?
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<style>
*{
margin:0px;
padding:0px;
}
header, nav, article, footer, address {
display: block;
}
header{
position:relative; height: 50px; background-color:#2b2b2b;
}
footer{
height: 50px;
width:100%;
bottom: 0px;
position: fixed;
background: red;
}
#explorer{
position:relative; bottom:55px;
}
#sections{
width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;
}
</style>
</head>
<body style="background-color:yellow">
<header >
<h1>Test</h1>
</header>
<div id="explorer" >
<div id="sections" >
</div>
</div>
<footer>
/* Footer Content */
</footer>
</body>
</html>
I think Kit's code needs just one adjustment & that is we have to remove the height:100% from the sections div & it will work just fine. Also while testing the following code, i noticed that if we reduce the height beyond a limit the footer actually comes above the header. Although, practically the height would never be so less, but still you might want to add z-index:5000 to header tag
Like this?
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
html, body, h1 {
margin:0px;
padding:0px;
}
header, nav, article, section, footer, address {
display: block;
}
header {
position:relative;
height: 50px;
width: 100%;
background-color:#2b2b2b;
}
footer{
height: 50px;
width:100%;
bottom: 0px;
position: fixed;
background: red;
border-top: 5px solid yellow;
}
#explorer{
position:relative; bottom:55px;
}
#sections{
width: 100%;
height: 100%;
bottom: 55px;
position:fixed;
top: 50px;
background: rgba(0,0,256,.5);
}
</style>
</head>
<body>
<header >
<h1>Test</h1>
</header>
<div id="explorer" >
<div id="sections" >
</div>
</div>
<footer>
/* Footer Content */
</footer>
</body>