I'm using this example fyi: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ (where the left column is a fixed width via px and the right is re-sizable)
I'm trying to make the height of the container 100% of the body height.
e.g. forget the bottom content (the copy code) on that page, just the top layout example, how would I make the height of that (no matter if there's content or not) 100% the body height. With content I'm trying to get it to scroll, without (if any) it needs to be 100% height of the body minimum.
Any suggestions, no luck so far..
My jsfiddle example:
http://jsfiddle.net/GtK98/1/
Have you tried
min-height:100%;
in the css?
this is a layout without a footer, If you want to add a footer comment here and I'll do that to.
Pure CSS, without Fixing the header height, with/without fixing the left side width, cross browser (IE8+)
Take a look at that Working Fiddle
HTML: (very basic)
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftContent">
</div>
<div class="RightContent">
</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%;
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Wrapper > div
{
height: 100%;
overflow: auto;
}
.LeftContent
{
float: left;
/*for demonstration only*/
background-color: #90adc1;
}
.RightContent
{
/*for demonstration only*/
background-color: #77578a;
}
Related
I'd like to have a sticky header with a %-height property. Sections below the header should take up the remaining height of the page, for example: header=10% all other sections are atleast 90%. This is similar to a related question: CSS Sticky Header/Footer and Fully Stretched Middle Area?, but he's using fixed px-height whereas i want %-height. I tried to use margin on my section, but that doesn't seem to work. Not does it seem to work to use a margin and 90% height on my sections.
For the moment I was able to come up with: http://jsfiddle.net/K9m63/. But a few problems:
The first section dissapears underneath the header.
Because of point 1, the section div's are too high and therefore not taking the remaining size.
HTML
<header>
<nav>Test</nav>
</header>
<section>
<div class="container yellow">1</div>
</section>
<section>
<div class="container pink">2</div>
</section>
<section>
<div class="container purple">3</div>
</section>
CSS
body, html {
height: 100%;
}
header {
height: 10%;
background-color: green;
position: fixed;
top: 0px;
width: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.nav-image {
vertical-align: middle;
}
section {
height: 100%;
width: 100%;
background-color: red;
}
.container {
width: 72.8125%;
background-color: blue;
margin: 0px auto;
height: 100%;
}
.yellow {
background-color: yellow;
}
.pink {
background-color: pink;
}
.purple {
background-color: purple;
}
Thanks!
Possible solution:
I have wrapped all sections into 2 divs.
<div class="wrapper">//rest 90% of the page
<div class="wrapper2">//100% of parent
<section>
<div class="container yellow">1</div>
</section>
<section>...
</div>
</div>
CSS:
.wrapper {
min-height:90%;
height:auto !important;
position:relative;
top:10%;
}
.wrapper2 {
height:100%;
width:100%;
position:absolute;
}
Also, add z-index:1; to header.
Updated fiddle here.
Based on your drawing, this is how you could* do it. - but there's also "fixed" / or "Sticky" positioning. - and this layout would force you to implement your own scroll below - in the page content, which is a pain.
html, body {
height: 100vh; /* you can use vh or % - but either way... */
height: 100%; /* they don't know their own height... how would they? */
}
body {
margin: 0;
}
.site-header {
background: #ff6666;
height: 10%;
}
.page-content {
background: #6666ff;
height: 90%;
}
<header class="site-header">
header
</header>
<main class="page-content">
main
</main>
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.
I am trying to do the following in a CSS template:
Dock the footer to the bottom when there is not enough content to
fill the page
Stretch the header and footer background across the whole width
Position all the content in the middle of the page
This is the code I have, created with help on here:
http://tinkerbin.com/lCNs7Upq
My question is, I have seen a few ways to achieve this. Is this the best? It seems a shame to have to have the empty div as well, is this a bodge?
You can fix and element to the footer using CSS:
position: fixed;
bottom: 0;
However, I'm trying to figure out what exactly your trying to do.
You header and footer should automatically go 100% across the page if it's a div.
Your middle section can be set to height: auto; via css and will fill up the viewport pushing the footer all the way to the bottom, but to do this you also have to set the body to 100% in order to get it to work.
html, body, #content {
height: 100%;
min-height: 100%;
}
#header {
height: 100px;
width: 100%;
background: blue;
position: fixed;
top: 0;
}
#content {
height: auto;
margin: 100px auto;
background: green;
}
#footer {
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
Your HTML should look somewhat like this:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
Working Example: http://jsfiddle.net/s4rT3/1/
This is the best example I have seen:
http://css-tricks.com/snippets/css/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
Update: In 2019 using flex is a better option.
Ok so I know this topic has many questions, but I still haven't been able to figure exactly how to make this work. This is close to the problem, but its not working for me.
I want my page to have 100% height. Inside this page is a static header of height 40px, and then content that takes the remaining height (100% - 40px).
HTML:
<body>
<div id="page">
<div id="header">
header
</div>
<div id="content">
content
</div>
</div>
</body>
CSS:
html, body
{
height: 100%;
margin: 0px;
}
#page
{
min-height: 100%;
}
#header
{
height: 40px;
}
#content
{
height: 100%;
position: absolute;
top: 0;
padding-top: 40px;
}
This is an explanation of the code:
I added position: absolute to content because otherwise it would not take up 100% of its container #page for some reason
Then the problem was that it exceeds the boundaries of the page, which is why I added top: 0.
Then the contents of #content overlaps with the header so I added padding-top: 40px
Now the #content exceeds the boundaries of the page again
Any suggestions? Thanks.
This should work:
http://jsfiddle.net/94JNZ/1/
#content
{
height: auto;
width: 100%;
position: absolute;
top: 40px;
bottom: 0;
}
You can use box-sizing property for this
Check this:
http://jsfiddle.net/Gn8zN/1/
Another simple & best solution
Check this:
http://jsfiddle.net/B8J2H/
Here is an article about this problem. CSS 100% height problem
You can see the example page has a perfect 100% layout what header and footer.
It uses relative position and not absolute.
Use flex:1;
html, body
{
height: 100%;
margin: 0px;
}
#page
{
min-height: 100%;
display: flex;
flex-direction: column;
}
#header
{
display: flex;
height: 40px;
background-color:red;
}
#content
{
display: flex;
flex: 1;
background-color:blue;
}
<body>
<div id="page">
<div id="header">
header
</div>
<div id="content">
content
</div>
</div>
</body>
Just script it:
<script type="text/javascript">
function contentSize()
{
document.getElementById('content').style.height=(window.availHeight-40)+"px";
}
onload=contentSize;
onresize=contentSize;
<script>