I've got (again) the problem of adapting a child <div> tag's size to its parent size. The parent element is controlled by another script (don't want to touch that) and could be placed anywhere on the screen with variable height/width. In my example below that's the #container. I would like to put some layout in it, which has some variable and some fixed dimensions:
a footer (here: #footer), having a fixed height (of e.g. 100px) and fills up the whole width of the parent
a navigation bar on the left (here: #left), having a fixed width (of e.g. 150px) and fills up the whole height of the upper part
a content part, right from the navigation bar, that is just the remaining space.
I found some solution for the "footer", which actually works (Make a div fill the height of the remaining screen space -> the posting by 'daniels'). But I couldn't achieve the #left part to fill up the whole height.
Below is my example code (Online-Version: http://worldtalk.de/v2013/test.html; will not stay online forever!):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
* { margin: 0; }
html, body { height: 100%; }
#container {
position: absolute; /* have no control over that container element */
width: 400px; height: 300px;
top: 100px; left: 10px;
background: red;
}
#upper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* -100px being the size of the footer */
}
#footer {
background: green;
height: 100px;
}
#left {
background: yellow;
float: left; width: 150px;
/* the following CSS doesn't do what I want... */
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="upper">
<div id="left">left - shall reach down until footer</div>
content part...<br> shall be next to it...
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Any ideas to achieve this without using JavaScript?
Regards,
Stefan
Solution 1
I assume the issue with position:absolute; is that the left navigation would be placed on top of the footer, however here is a solution using absolute for both the left nav and the footer. The flaw with it is that the left navigation continues under the footer which may or may not be an issue.
#footer {
position:absolute;
left:0;
right:0;
}
#left {
position:absolute;
bottom:0;
}
http://jsfiddle.net/LmCLz/1/
Solution 2
Rearrange the elements like so:
<div id="container">
<div class="inner">
<div id="left">left - shall reach down until footer</div>
<div id="right">content part...<br> shall be next to it...</div>
<div class="clear"></div>
</div>
<div id="footer">footer</div>
</div>
Then apply a margin-bottom:-100px; to make room for the footer:
.inner {
height:100%;
margin-bottom:-100px;
}
http://jsfiddle.net/LmCLz/3/
Related
I tried the following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
#outer {
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
#left-content {
height: 90%;
width: 50%;
padding: 2em;
}
#right-content {
height: 90%;
width: 50%;
padding: 2em;
}
</style>
<div id="outer" style="display: block">
<div id="left-content" style="display: block">xx</div>
<div id="right-content" style="display: block">xx</div>
</div>
</body>
</html>
However the outer DIV still doesn't fill much of the screen. How can I make it so this DIV fills the 90% and just leaves a 5% border?
You need to give your html and body a height:
body, html{
height: 100%;
}
You need to set your document and body to 100% width/height.
body,html
{
width:100%;
height:100%;
}
As a side note, your inner div requires the use of the float attribute if you really want one on the left and one on the right. That or some pixel perfect offsets.
If you do float them, you won't be able to get away with having two 50% divs with padding or margins, padding and margins are in addition to the width/height of the div.
You might want to read up on the css box model.
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 tryingg to design and simple css template for my dashboard. Like to have top section to display the logo and the title, left section for the menu, center to display info based on the menu, right to display some info, bottom to display some contact info. I like left/center/right side of the page to be vertically and horizontally scorllable. When scrolled, I need the header to be always showing on the browser.
can anybody help me with this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dashboard Layout</title>
<STYLE type="text/css">
#top {
height: 100px;
widht: auto;
border-bottom: 5px solid;
}
#left {
height: auto;
width: 350px;
border: 1px solid;
float: left;
overflow: scroll;
}
#content {
width: auto;
height: auto;
float: left;
overflow: scroll;
}
#right {
height: auto;
width: 350px;
float: right;
overflow: auto;
}
#bottom {
height: 50px;
width: auto;
}
</STYLE>
</head>
<body>
<div id="top">
<h3><b>Dashboard</b></h3>
</div>
<div id="middle">
<div id="left">
<h3><b>Menu</b></h3>
</div>
<div id="content">
<div id="div1" </div>
</div>
<div id="right">
<h3><b>Definitions</b></h3>
</div>
</div>
<div id="bottom">
<p>This dasboard prodides info about systems.</p>
</div>
</body>
</html>
To have a div that is always visible whether or not your scroll, use:
.visibleDiv
{
position: fixed;
}
Yes, as Karan said, you have to fix the position of your header (#top). A fixed element is positioned relative to the browser window.
#top {
position: fixed;
width: 100%
top: 0;
height: 100px;
border-bottom: 5px solid;
}
Then you would see your content div (#middle) starting to overlap with the header, so you should set aside a top margin.
#middle {
margin-top: 100px /* the same height as your header */
}
And because you are floating several divs, I suggest that you clearfix after them to adjust the height of the parent div.
There are many great tutorials for css menus and headers on the web, so Google them! :]
I have a pretty run-of-the-mill website: header, body and footer. The header and body are green, but the footer is black. The site looks fine when there's a large amount of content, but on pages with only a paragraph or two, the footer doesn't extend to the bottom of the page (especially on larger monitors), and the green background of the site extends beyond the footer - not the effect I'm going for.
Is there a way to set the footer height to extend all the way to the bottom of the page, regardless of content and monitor size? Ideally this would be done without using Javascript.
You are looking for a sticky footer. I have had good experiences with Ryan Fait's solution, but this new sticky footer manages to work without the extra tags.
From the exposition on the sticky footer:
In the head:
<style type="text/css">
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
And for your body:
<div id="wrap">
<div id="main">
<!-- Your content here -->
</div>
</div>
<div id="footer">
</div>
Edit
From your explanation, it seems that I misunderstood you. You are looking for an auto-expanding section, rather than a sticky footer. If this is the case, you can get that effect by using display: table (though it doesn't work in as many browsers as the sticky footers do - it fails in IE 7, for example).
I have created an example here.
The code, for reference:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
min-height: 100%;
padding: 0;
}
.Wrapper {
display: table;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
}
.Contents {
background-color: #CCC;
display: table-row;
min-height: 100px;
}
.Footer {
background-color: #0C0;
display: table-row;
min-height: 100%;
}
.data {
display: table-cell;
}
.Wrapper .data {
height: 100px;
}
.Footer .data {
height: 100%;
min-height: 40px;
background-color: #0C0;
}
</style>
</head>
<body>
<div class="Wrapper">
<div class="Contents">
<p class="data"> </p>
</div>
<div class="Footer">
<p class="data"> </p>
</div>
</div>
</body>
</html>
You could add a dummy div and style that with CSS to match the height of your navigation pane, with your footer below this div, it'll always style the way you want.
It would be better if you did use some JavaScript, it wouldn't be complicated at all.
If I'm understanding your question correctly, you'll need to clear the footer, by applying clear:both; in css selector for the footer.
would suggest going for the js alternative..seems much easier..please tell us if there's any specific reason to avoid js based styling in your case...the only other alternative i could think of is hardcoding the body content div dimensions and setting the footer position fixed..not ideal
I am working on a layout for a new site, and I'm having some trouble achieving what I want with the CSS. First of all, I want everything to always stay within the view of the current browser window, with scroll being in my content and not the browser itself. I have an outermost DIV which acts as my "wrapper" for the site displayed centered, with a set width, and having 100% height of the bowser window. Inside of this I place a header and all of this works as intended in all interested browsers.
However, once I place my actual content DIV inside this "wrapper" I am unable to define it to be the size I want. If I simply give it margins or padding to make up for the header I have absolutely positioned, the content will overflow and I can't set scroll. And if I try to set the size directly, there are no values I can put in that will work since the margins/padding will add to the size and it will now be bigger than the current browser window, and overflow.
Are there any styles people can think of I can use on the wrapper/content DIV(s) to get the desired look? Here is a diagram illustrating the look I want.
The following assumes, that you have a fixed height for your header (not a percentage). This example uses px values to make it easier to inspect with Firebug, but it works the same with em.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin:0;
height: 100%;
}
#wrapper {
position:relative;
width: 400px;
height: 100%;
margin: 0 auto 0 auto;
}
#header {
position:absolute;
margin-top:0;
height: 70px;
width: 400px;
background-color: #ccc;
}
#content {
position: absolute;
top: 70px;
bottom: 0;
width: 400px;
overflow: auto;
background-color: #99c;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
Content<br/>
Content<br/>
Content<br/>
Content<br/>
Content<br/>
Content
</div>
</div>
</body>
</html>
The important point is, that #content doesn't use a height at all - it uses a combination of top and bottom instead.
Note: I'm pretty sure, that modifications will be required for IE 6 ...
<style>
html, body {
margin: 0;
padding: 0;
text-align: center;
overflow: hidden; // prevents scroll bars in browser window}
#content_wrap {
width: 800px; // set this to whatever you want
margin: 0 auto; // centers the div
text-align: left;
height: 100%;
position: relative; // basis for absolute positioning}
#header {
position: absolute;
top: 0;
left: 20px;
width: 760px;}
#content {
position: absolute;
left: 0;
top: 20%;
height: 80%;
overflow: scroll;
overflow-x: hidden;}
</style>
The challenge with this approach, and any that I can think of, is that without CSS expressions, you can't make the #content div height extend to the bottom of the screen except as a percentage. The trouble with this is that your header will not have a fixed amount of room in which to work. There's no CSS representation for your ideal "#content div should have 200px margin on the top and extend to the bottom of the page" set of attributes.
You could do this easily with JS, however.