I basically have some sibling divs, header, content, footer. I want the content to dynamically fill the space of the parent left by the header and footer when the window is resized.
I've tried using height:100% on all or some of them and that always makes the elements too tall. I don't want a scroll bar. Can this be done with just CSS or will I have to use Jquery?
http://jsfiddle.net/2fnA7/
HTML
<html class="fill">
<body class="fill">
<div>header</div>
<div class="content">content</div>
<div>footer</div>
</body>
</html>
CSS
.fill
{
height:100%;
}
.content
{
height:100%;
}
If you have fixed heights for header and footer, you can do this by setting both top and bottom on the content div i.e.
<style type="text/css">
html, body{width: 100%; height: 100%; margin: 0; padding: 0}
.header{position: absolute; top: 0; width: 100%; height: 100px; background: #888}
.content{position: absolute; width: 100%; top: 100px; bottom: 100px}
.footer{position: absolute; bottom: 0; width: 100%; height: 100px; background: #888}
</style>
That's correct, the height of the box is 100% of the container, however you also have to take into account you have borders, and the footer in there too.
so total height is:
height of container + sum of borders + height of footer.
this will force a scrollbar.
There are many ways to simulate this effect, each with a compromise.
1st. fixed header, footer and set top and bottom : jsFiddle
Compromise, Elements are fixed in size and design is rigid thus and isn't content driven. can make upates harder in the future because everything is absolutly positioned.
2nd. Percentage proportions : jsFiddle
Compromise, Everything scales - not just the content area. Which means the bigger the screen the bigger your header and footer.
3rd. Mix and match, fix what is fixed and leave flexible what needs to be flexible : jsFiddle
Compromise, although more flexible it involves hiding content which is can be difficult to manage.
By no means do you want to use any one of these methods. Look at your content and mix the methods that will give your content the most space and best appearance. CSS properties like calc() will make this easier as time goes on but browsers need to get there first.
I would reccomend looking at option two as its the most flexble and implement a min and max height if you need to restrict your header and footer getting too big. (jsFiddle)
This is working:
the header and the footer based on pixel and the content based on percent.
page.html
<style>
.header
{
background-color:#222;
padding:5px;
position: absolute;
top: 0px;
left:0px;
right:0px;
height:100px;
}
.content
{
background-color:#CCC;
padding:5px;
position: absolute;
top: 100px;
bottom: 50px;
left:0px;
right:0px;
}
.footer
{
position:absolute;
bottom: 0px;
border:1px;
height:50px;
background-color:#09F;
left:0px;
right:0px;
}
</style>
<div class="header">1</div>
<div class="content">2</div>
<div class="footer">3</div>
Related
I'm working on a web design project for one of my classes. I cannot figure how to make the divs go down the whole page (the color)
http://jsfiddle.net/vmm1s4Lt/
http://codepen.io/bmxatvman14/pen/fihwD
Excerpt:
nav {
background: black;
color: white;
float:left;
width:20%;
height:800px;
display:inline-block;
/*margin-top: 40px;*/
padding-bottom: 40px;
position: relative;
z-index: 10;
}
#main {
background-color:#04cfe1;
float:right;
width:80%;
/*margin-right:10px;*/
}
Notes: I'm a pretty moderate coder, so I have tried height: 100% and that didn't do anything.
I'm trying to make the black side bar go all the way, and the blue span across the rest of the page.
Full page site: http://rubergaming.com/project/
Thanks a ton!
You can achieve this by using height 100%, but you may have forgotten that you also need to give container elements a height of 100% in order for that to work when you are giving your #main div that 100% height. I also slightly modified some of your other styles, you may need to tweak as needed. http://jsfiddle.net/ngz6e5p1/.
/*Give containing elements, as well as our main div, a height of 100%*/
html, body, #wrapper, div#main {
height: 100%;
}
/*This is overriding styles you already had - I changed the nav's height from 800px to 100%, and removed padding which will cause there to be an extra white space under the main blue nav if present */
nav {
height: 100%;
padding-top: 0px;
padding-bottom:0px;
}
What do you mean for the black bar to go all the way? And to span the blue div across the rest of the page try this:
<div id="main" style="
position: absolute;
margin-left: 20%;
bottom: 0;
top: 0;
">
//ALL THE OTHER STRUFF INSIDE THIS DIV
</div>
I have had a lot of trouble with my footer and my page content, and am trying to find the correct way to do this. I have my footer at the bottom of the page, but when I add content it overflows the container, please help me.
CSS:
#container {
width: 75%;
height:100%;
margin:0 auto;
background-color:black;
margin-top:10px;
margin-bottom:10px;
padding:10px;
opacity:0.8;
#content {
width:100%;
}
footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 115px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<body>
<div id='container'>
<?php
include 'navfoot/navbar.php'
?>
<div id='content'>
<div id='paragraph'>
<p>Eventually our website will be advanced enough for us to have a news feed! But until then we suck!</p>
</div>
</div>
<?php
include 'navfoot/footer.php'
?>
</div>
It depends on how you want the footer to act (fixed at bottom always, or relative to the content). But from what it sounds like, try adding this to your footer CSS:
footer {
background-color: black;
position: fixed;
}
That will keep it fixed and at the bottom of the page (in Chrome, at least). Otherwise, make the position: relative of the footer and that will sink it to the bottom of the content.
Your container and footer are set to 75% width and your content is set to 100% width. That could be why it's going past the container/footer. It depends on the order. The absolute positioning on the footer could be causing it. You could try changing to relative.
Please post a mock-up of what you are trying to achieve and the HTML to what you have now.
If you are using PHP includes, we need to see what those are. Lots of variables that can cause content to break.
If the issue happens when you are resizing your browser, it's because the paragraph ID (#paragraph) has a fixed width of 500px and everything else is percentages.
Fixed on the footer will not resolve the text flowing on top of it.
I'm working on a website that fits perfectly in the browser window. Below is a basic blueprint of the website layout:
So far, the Red area is just display:block. The Green area is also display:block with margin-right:200px. The Blue areas(nested in a div) is float:right.
So I've got the width sorted. It's the height I need advice on. The Red and Dark Blue areas are a set height, but I need the Green and Light Blue areas to fit the height of the browser window view.
I'm trying to use box-sizing, but it exceeds the height of the window view because it's extending to the max height of the window. Sorry for my poor explanation. Any advice if would be excellent. Thank you!
For green div set height: calc(100%-{red-div-height}); and for the light blue div set height: calc(100%-{dark-blue-div-height}-{red-div-height});
This is kinda the legacy version of C-Link's answer.
jsFiddle and fullscreen
This has the limitation of any content falling below one page-full falling outside of its container (you can see if you scroll down in the fiddle, but not on the fullscreen).
Make sure our page stretches to its full height.
body, html { height: 100%; width: 100%; margin: 0; padding: 0;}
Set a static-height header.
header {
height: 101px;
background: red;
}
Create a box for everything under the header. You were on the right track with the box-sizing. We can add padding to it, in the same amount as our header. Then percentages inside it work nicely.
.content {
position: absolute;
box-sizing: border-box;
padding-top: 111px;
padding-bottom: 10px;
top: 0; left: 0;
height: 100%; width: 100%;
}
We float our aside (may or may not be the correct element, depending on contents) and set some styles on it.
aside {
float: right;
width: 20%;
height: 100%;
padding-bottom: 111px;
box-sizing: border-box;
}
.top {
height: 100px;
background: blue;
}
.bottom {
margin-top: 10px;
height: 100%;
background: skyblue;
}
This is our main, large, content area, which we float to the left. The width could be specified exactly if we wanted exact padding at the cost of additional HTML.
[role="main"] {
width: 78%;
background: limegreen;
height: 100%;
float: left;
box-sizing: border-box;
}
You can also set overflow-y: auto on our main or aside elements, to have them scroll when they run out of space. There should also be mobile styles for this page that remove the floating, absolute positioning, absolute styling, and widths should be nearly 100%.
you can always set the green box height to the window height minus the red box height.
accordingly the light box height to the window height minus the (red box height + the dark blue box height)
Edit 1: I haven't mentioned that has to be done with javascript.
Edit 2: Consider any paddings and margins too.
Could you not just give the divs a max or min height depending on their purpose?
I use a main container or wrapper div that the others would be contained in, that div is then my effective page or screen area.
<div id="wrapper">
<div id="content">
<div id="sidebar">
</div>
</div>
</div>
#wrapper{
min-height: Whatever value you want here;
max-height: Whatever value you want here;
}
It might be a good idea to set up your page using main container divs, hot only for the content but for the header and footer as well.
As an example, I have a main wrapper that is the whole page, within that is the header div, the content div, the nav div and the footer div. These are the main ones. Everything else can then be contained within them.
So, you can set the layout out using percentages so you have a fluid design that'll react to each browser size. The other elements will then 'fit' inside the main divs and be constrained to them. You may need to look into positioning etc but this is certainly the direction you should head towards.
<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>
Then use the css to re deisgn the above layout focusing only on those main divs. Use % instead of px to maintain fluidity.
#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
A pretty common trick is to give the green (and light blue) box absolute positioning, a padding AND a negative margin. Because 100% width is relative to the containing box (could be a parent div, or just the window itself) this is not suitable. When the header was a relative height, say 10%, it would've been easy. The padding makes sure the content will not disappear behind the header, the negative margin puts the box back in place. Don't forget the z-index (otherwise the content (green part) will overlap the header).
The css looks like this:
.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }
The fiddle looks like this: http://jsfiddle.net/2L7VU/
I'm beginning to get frustrated with CSS. Anytime I think I've grasped one of its many facets, I'm completely thrown off by unexpected behaviour.
I've been trying to make a sticky footer. SO I set the height of my body element to 100% so it takes up the full html element in height ( browser window ). I then wrap everything inside the body in a div except for the footer element, and set this div's height to 100%, thinking that this will take up the full body in height and so push the footer off the bottom of the screen. I could then apply a negative margin yo bring it up and fix it at the bottom.
But the footer sits at the bottom of the page below all the body, without need for a negative margin.. So my idea of setting height to 100% is completely thrown off.
What's happened here?
If you want to create a fixed footer, then you don't need to worry about the height property.
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: yellow;
}
<body>
<p>This is the body</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
HTML
<div class="footer">Content</div>
CSS
body{
margin:0; //you need it for the correct bottom margin
}
.footer
{
position: fixed;
bottom:0;
height:75px; //height of the footer
color:white;
background-color: black;
width:100%;
margin:0px;
}
Sorry but I can't get this to work. Should be a quick answer.
My html is laid out like so:
<html>
<header>
...
</header>
<body>
<div class = "background"></div>
<div class = "content">
...
</div>
<body>
</html>
The I want the background div to simply place a 1000px background colour down the entire length of the page. The content is then padded 40px on each side, inside this background colour.
The css is like so:
body {
width:1000px;
margin-left:auto;
margin-right:auto;
}
.background {
position:absolute;
top:0px;
width:1000px;
height:100%;
}
.content {
min-height:100%;
padding-left:40px;
padding-right:40px;
}
I thought it worked like so... The body div would expand to hold the min-height of the .content div. This means that 100% height of the .background div would fill the entire body and so the length of the page. However it does not. It only fills the window height. Where am I going wrong?
Thanks
As topek guessed, this will do it:
html, body{
height:100%
}
The reason this works is because percentage CSS heights only work if the parent element has a height defined on it. By adding the above, you're giving .background's parents a height.
Update: based on OP's comment, here's how you would get the .background div to always appear to fill the viewport:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/* Fixed element that takes up entire viewport */
.background {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Content that stacks above .background */
.content {
position: relative;
z-index: 2;
}
As .content grows larger than the viewport and the user scrolls, the fixed position of .background will keep it always in view.
And of course, a handy example.
All you need is:
body, html {
height:100%
}
Then specify height:100%; any DIV you want to have full height.
BTW - 1000px wide is a bad unit to use. People with 1024 wide screens will get horizontal scrollbars. Better to stick to 980 or less. 960 is good because it can be divided by many factors.
I think this is what you're looking for.
http://jsfiddle.net/sg3s/GxRcp/
The key in this little example is the position: fixed; for .background so that it is kept in the screen while scrolling.
If you don't really want to do this and want the background to expand ARROUND the content just make it a normal / relatively positioned element, and wrap it arround .content...
If you give a more acurate description of the layout you're trying to create (and maybe why in such a way) we may be able to help you better.
Btw, in your example html there is an error, header should be head.
You should put bg into html or body elements as the first choices.
html { background: url("bg.jpg") no-repeat top center; }
or
body { background: url("bg.jpg") no-repeat top center; }
Fixed:
background: url("bg.jpg") no-repeat top center fixed; /* And bg will stay in fixed position */