Is there an easy way with just css to make a div expand to the full height of the page - 30px. I have a "footer" at the bottom of the page that is 30px tall and set to position: fixed; bottom: 0px; I don't want any of the content from the rest of the page to show behind this footer.
<body>
<div id="wrapper">
<div id="header">Header added just for demonstration purposes</div>
<div id="content">Main content goes here</div>
<div id="footer">And this is my footer</div>
</div>
now style
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative; /* Required to absolutely position the footer */
}
#footer {
height: 50px; /* Define height of the footer */
position: absolute;
bottom: 0; /* Sit it on the bottom */
left: 0;
width: 100%; /* As wide as it's allowed */
}
#content {
padding-bottom: 50px; /* This should match the height of the footer */
}
i would probably place all in a wrapper and set the size to 100%,
But in new css3 you have calc() which does exactly what you need: http://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc
Please note that not all (even modern) browsers yet have support for calc()
Related
My container is not touching my footer for the majority of cases and I'm not sure what's going on.
So here is my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
So I have all of the heights set for parent elements,but there's still a big gap between the container and the footer. In cases where the content takes up the whole page, the footer and container ends up touching, but the content for some reason gets lost in the footer. How can I solve this issue?
Height based on percentage are tricky. vh is much better for such purposes.
Here is the solution: JSfiddle
#container {
overflow: hidden;
width: 80%;
margin: 0 auto;
background: red;
height: 100vh;
}
Make one adjustment to your CSS:
Add height: 100% to the html element.
html {
height: 100%; /* NEW */
min-height: 100%;
position: relative;
}
This will clear the way for all child elements to recognize their percentage heights, and the container will expand. Your min-height: 100% will still work because min-height overrides height.
DEMO: http://jsfiddle.net/au6tcodc/
(You'll notice a vertical scrollbar on the container in the demo. This is caused by the overflow: auto declaration in #container. If you want to remove the scrollbar switch to overflow: hidden (see all overflow values).
I would like to have an ADS fixed on the right side when landscape (25% width) or on the bottom when portrait (25% height).
Landscape is working fine, but on portrait it's not respecting the 25% of the main div.
<div id="container">
<div id="header"></div>
<div id="main" class="ORIENTATION">
<div id="queue"></div> <!-- 75% -->
<div id="ads"></div> <!-- 25% -->
</div>
</div>
Landscape Example:
https://jsfiddle.net/gmrn24yd/9/
Portrait Example:
https://jsfiddle.net/gmrn24yd/8/
The problem was with your header, It was taking 70px and Your #main height is 90%, It can't What if 70px is greater than 10% of the document? It will push other div down and thats why ads portions is getting cutoff. The solution is The height of #main should be based on header aswell. You can use calc function of css to calculate. Do some RnD and check browser compatibility for this. Here is the mdn documentation for calc.
Here is the solution of your problem.
*{
box-sizing:border-box;
}
#container {
width: 100%;
height: 100%;
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
display: inline-block;
}
/* HEADER */
#header {
width: 100%;
height: 70px;
position: relative;
background: #ed1c24;
padding: 20px 0;
}
/* MAIN */
#main {
width: 100%;
height: calc(100% - 70px); /*Calculate height based on header*/
position: relative;
text-align: center;
}
/* MAIN LANDSCAPE */
#main.landscape {
display: inline-block;
}
#main.landscape #queue {
width: 75%;
height: 100%;
float: left;
}
/* MAIN PORTRAIT */
#main.portrait {
display: block;
}
#main.portrait #queue {
width: 100%;
height: 75%;
}
/* LANDSCAPE ADS */
#main.landscape #ads {
width: 25%;
height: 100%;
float: right;
background: #000;
}
/* PORTRAIT ADS */
#main.portrait #ads {
width: 100%;
height: 25%;
background: #000;
}
<div id="container">
<div id="header"></div>
<div id="main" class="portrait">
<div id="queue"></div>
<div id="ads"></div>
</div>
</div>
He doe's respect the height, it's just you can't see it because his bottom area is out of the body and his position is fixed. If you use chrome and you know how to see the width and the height of the element you will see it. Look the images:
I could not see any problem while running this code. Only thing since you have given 100% height and width for the container view is cut off. You can verify the code by providing a fixed width and height for the outer container
Here is my JSFiddle thus far.
What should I do to make sidebar stretch vertically (height) on the entire page? Right now it stretches to the original height of web browser window, but when there is more content inside the container, the sidebar does not stretch with it.
HTML:
<div class="main-content">
<div class="sidebar">
menu
</div>
<div class="content">
... a bunch of content ...
</div>
</div>
CSS from the above JSFiddle:
html, body {
width: 100%;
height: 100%;
}
.main-content {
width: 100%;
height: 100%;
}
.sidebar {
width: 100px;
float: left;
background-color: #000;
color: #fff;
min-height: 100%;
}
.content {
width: 200px;
float: left;
}
I don't think there is a "pure" css solution for this issue. The problem is that your sidebar is 100% height of it's parent container. And it's parent container main-content is 100% height of it's parent (the window). So for your content to be the same height as main-content's inner content you would then have to set a pixel height value to main-content.
However you could easily resolve this with jquery.
var sidebar = $('.sidebar');
var content = $('.content');
if (content.height() > sidebar.height() )
sidebar.css('height', content.height());
else
sidebar.css('height', sidebar.height());
Fiddles:
http://jsfiddle.net/up7Zg/29/ and http://jsfiddle.net/up7Zg/30/
try this
.sidebar {
position: absolute;
top: 0;
bottom: 0; /* this line, and the one above, confer full-height */
left: 0;
width: 30%;
background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}
I have an HTML page which is divided into 4 sections.
Header
Menu
Content
Footer
I am using 1 div for each section and 1 div which wraps all the 4 divs.
My header's height is 50px, the menu's height is 50px, and the footer's height is 20px.
Then I try setting the menu's height to 100%. Menu div is taking the height of its container which is creating scrollbars in my page.
The CSS is as follows:
html, body {
margin: 0px;
height: 100%;
width: 100%;
min-width: 1024px;
min-height: 500px;
}
#container {
width: 100%;
height: 100%;
}
#header {
width: 100%;
height: 50px;
}
#menu {
width: 100%;
height: 50px;
}
#content {
width: 100%;
height: 100%;
}
#footer {
width: 100%;
height: 20px;
}
Is it possible with CSS alone or I have to use JavaScript also?
Here is another Pure CSS solution, that works without specifying any height whatsoever.
[this solution deserves its own answer]
Here's a Working Fiddle
Why is it good?
because maybe your header will change one day affecting his height, or your menu will grow, or your footer will need an extra line causing his height to grow..
all of that changes will cause you to re-fix another height for the changing element, and recalculate the right height for the content.
my solution makes it easier, because all the parts are fluid.
let them take the space they need in the page, and the content will always take the remaining height.
Browser support:
Tested On: IE10, Firefox, Chrome, Safari, Opera. (not working on older IE, not tested on other browsers)
any Downsides?
yes. unfortunately, because of the way that this trick works, you will need to change the arrangement of your HTML.
I found a Pure CSS way to create a div container, with two child div's.
the first will take the exact height he needs, and the second will take the remaining of the container height's.
but what if I want the opposite scenario,
What if I want second div to take his exact space and the first div to take the container's remaining height?
I didn't find an easy way to do that with Pure CSS.
thats why, I actually reverse the order of the divs, the first holds the second data, and the second holds the first data, now we let the first div to take his exact height, and the second stretch to the end of the container as we want, and then I rotate their view via CSS to make them appear in order.
For your case it means that you will have to create the HTML in that order.
Header
Menu
Footer
Content
The Solution:
HTML:
<div class="Container">
<div class="Header">I'm in the header</div>
<div class="Menu">I'm in the menu</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">I'm in the footer</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="Content">
I'm in the content
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Menu
{
/*for demonstration only*/
background-color: #6ea364;
}
.Content
{
height: 100%;
overflow: auto;
/*for demonstration only*/
background-color: #90adc1;
}
.Footer
{
/*for demonstration only*/
background-color: #b5a8b7;
}
Here's a thought. May not work for your specific problem, but it does address the issue of mixing pixels and percents. Under the current definition of the problem, you use a fixed height for both the top (header, menu) and bottom (footer). But you want to have the content take up the rest. One solution would be to pad the top and bottom of the container with the same height of the header and menu on top and the same height as the footer on the bottom. The problem then is that you have a 100% height container plus 100px on top and 20px on bottom. But there's a CSS convention for that. It's called box-sizing and is very cross browser compatible (as long as you include -moz). in effect, it calculates 100% height after including the padding. Therefore, 100% height plus all the padding still equals 100% height.
In practice it looks like this
HTML
<div class="container">
<div class="header"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS
html, body, .container {
min-height: 100%;
background:#eee;
}
.header {
height: 50px;
position: relative;
z-index: 1;
}
.menu {
height: 50px;
position: relative;
z-index: 1;
}
.footer {
height: 20px;
width: 100%; /* needed because this one is position absolute */
bottom: 0%;
position:absolute;
}
.content {
height: 100%;
width: 100%; /* needed because this one is position absolute */
top: 0%;
left: 0%;
padding-top: 100px;
padding-bottom: 20px;
position:absolute;
box-sizing: border-box; /* here's the kicker */
-moz-box-sizing: border-box;
overflow: auto; /* don't panic. they take the place of normal scroll bars*/
}
Demo
http://jsfiddle.net/WLR5S
Source
http://jsfiddle.net/WLR5S/show
http://jsfiddle.net/WLR5S/6/show (with -moz for firefox)
Pros
Obviously, the point is that you can have 100% height elements with padding to compensate for footer and header
Cons
You have to use position absolute for the content and footer, and you have to apply position relative with z-index to the header area
EDIT
After a little more experimenting, I found that it's probably best to use height instead of min-height and apply overflow:auto or the like. That way the page has appropriate sidebars if the content gets to be too large: http://jsfiddle.net/WLR5S/2/ or http://jsfiddle.net/WLR5S/3/
Pure CSS Solution
using calc() (CSS3)
Working Fiddle
HTML:
<div id="container">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
CSS:
html, body {
margin: 0px;
height: 100%;
/*min-width: 1024px;
min-height: 500px;*/ /*You can uncomment that back if you want)*/
}
#container {
height: 100%;
}
#header {
height: 50px;
}
#menu {
height: 50px;
}
#content {
height: calc(100% - 120px); /*120 = 50 + 50 + 20*/
overflow: auto;
}
#footer {
height: 20px;
}
notice I removed your width:100% because this is the default behavior of a block element like a div.
This can also be done without stating any height at all, with Pure CSS.
Check my second answer in that page.
My project has the following requirements:
Header fixed to the top of the page
Content area has a white background and 100% height
No scroll bar when content is less than height of the screen
Must support IE7+ (a JS fix for IE is ok)
When content is taller then height of screen, scrolling it should stay within the white content area (not go under the header).
Here is my basic HTML:
<div class="wrap">
<div id="header">header</div>
</div>
<div class="wrap" id="content">content</div>
CSS:
body{background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;}
html,body{height:100%;}
.wrap{width:300px; margin:0 auto;}
#header{position:fixed; background:#aaa; top:10px; width:300px;}
#content{height:100%; background:white; margin-top:40px}
Example: http://jsfiddle.net/zw3WS/
First question is how to get the content to have 100% height, not go under the header, and still not have an unnecessary scrollbar?
Second, if the content is taller than the screen, how would I make it scroll only in the white space, and not allow the content to scroll under the to bar as it currently does?
For scrolling "only in the white space", you can do it by setting position: fixed on the wrapper element, then absolutely positioning the header and content elements inside:
body{
background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;
overflow: hidden; /* no scrollbars for page body */
}
.wrap {
width: 300px;
position: fixed;
top: 10px;
left: 50%; /* for horizontal centering */
margin-left: -150px; /* for vertical centering */
bottom: 0;
}
#header{
position: absolute;
background:#aaa;
top: 0;
left: 0;
right: 0;
}
#content{
background:white;
position: absolute;
bottom: 0;
top: 30px;
left: 0;
right: 0;
overflow: auto; /* this makes the scrollbar appear inside #content */
}
Demo: http://jsbin.com/osipin/1/edit
For scrolling in the page body, you need to add two elements to your markup: a background for the header, and a background for the content.
The purpose of the header background is to cover up the content when it's scrolled down, where otherwise it would appear underneath the header. What you use to cover the content is simply the same background as the page. You must size this bg element correctly so that it fills the width of the viewport, and is the height of the top margin of your content area. The real header can be horizontally centered within this bg element using a set width and margin: 0 auto.
The content background element should be an empty element which precedes the content, and has a fixed position. Its purpose is to ensure that the white area extends to the bottom of the page even when the content is shorter than the viewport height.
Your new CSS looks like this:
body, .header-bg {
background:#C0DEED url(https://si0.twimg.com/images/themes/theme1/bg.png) repeat-x 0 -80px fixed;
}
.wrap {
width:300px;
margin: 0 auto;
}
.header-bg {
position: fixed;
top: 0px;
left: 0;
right: 0;
height: 40px;
}
#header {
background:#aaa;
width:300px;
margin: 10px auto 0;
}
.content-bg {
background: #FFF;
position: fixed;
width: 300px;
top: 40px;
bottom: 0;
z-index: -1;
}
And your new markup like this:
<div class="wrap">
<div class="header-bg">
<div id="header">header</div>
</div>
<div class="content-bg"></div>
<div id="content">
CONTENT
</div>
</div>
Demo: http://jsbin.com/osipin/4/edit