I've searched through many forums and questions, however could not find anything concerning fluid vertical (not horizontal layout).
I have markup as follows:
<div class="wrapper">
<div class="header"></div>
<div id="content"></div>
<div class="footer"></div>
</div>
My CSS:
html,body {margin: 0; padding: 0; height: 100%;}
.wrapper {width: 900px; margin: 0 auto; height:auto !important; height:100%; min-height:100%; position: relative;}
#content {padding-bottom: 60px; /* For the footer padding */ }
.footer { position: absolute; bottom: 15px; height: 45px;}
In this case I have layout with fixed height of the header and content. The footer sticks to the bottom.
It's all great, but I want to make fluid vertical layout, so that the footer always sticks to the bottom (just as now) but the header and content have fluid heights: 30 and 70% accordingly.
How can I achieve that?
Layout:
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
<div id="content-text">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
height: 100%;
}
#container {
position:relative;
z-index:1;
width:100%;
height:100%;
margin-left: auto;
margin-right:auto;
overflow:hidden;
}
#header,
#footer {
position:absolute;
left:0;
z-index:2;
width:100%;
overflow:hidden;
}
#header {
top:0;
height:30%;
}
#footer {
bottom:0;
height:1.6em;
}
#content {
position:absolute;
bottom:0;
top:0;
right:0;
left:0;
z-index:10;
width: 100%;
height:auto;
margin-top:30%;
margin-bottom:1.6em;
overflow:hidden;
}
#content-text {
position:relative;
width:100%;
height:100%;
margin-left: auto;
margin-right:auto;
overflow:auto;
}
I also recommend a CSS reset before this.
EDIT
Sorry, first I added fix size for the header, I corrected it, though it seems to be a bit buggy this way. I'm still searching for the best way.
In cases like this I usually say - to hell with the CSS headaches, let's just use a good old fashion table instead!
HTML:
<table style="height: 100%">
<tr>
<td id="header"></td>
</tr>
<tr>
<td id="contents"></td>
</tr>
<tr>
<td id="footer"></td>
</tr>
</table>
CSS:
body, html
{
height: 100%;
}
#header
{
background-color: red;
height: 30%
}
#contents
{
background-color: lime;
height: 70%
}
#footer
{
background-color: blue;
height: 45px;
}
It might not be "stylish", but it gets the job done, and will be an order of magnitude simpler than the necessary CSS spiderweb. Also, if the contents of something get too big, it will (somehow, in a browser-specific fashion) resize to keep everything visible, adding a scrollbar to the body if necessary.
For footer you can try this
.footer {
position: fixed;
bottom: 0;
height: 45px;
}
As I had the same problem, you probably need a so called "sticky footer".
Look for example at http://ryanfait.com/sticky-footer/, it functions across all browsers. There's also a good article describing how to achieve it here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Demo Page - fixed fluid fixed
I've made a quick demo of a layout that is very common:
HTML
<body>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</body>
CSS
html, body{ height:100%; }
/* you can use "border-spacing" on the body as well */
body{ display:table; width:100%; padding:0; margin:0; }
body > *{ display:table-row; }
header{ height:100px; }
section{ height:100%; }
footer{ height:50px; }
Note that this will only work in modern browsers
Related
i have some div with height:100%, that have within this 3 divs: header, main, footer.
( here you can see an exemple: http://i61.tinypic.com/28mjpya.jpg )
in the 'main' div, i have a scroll, and i need this to be with height:100%
but when i do height:100% to the 'main' div, i cant see the 'footer' div.
and if i will do the 'footer' div with position:absulute; bottom:0px; it will hide my scroll bar of the 'main' div.
how can i solve this problem?
this is my source: http://jsfiddle.net/8YEJY/
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;'>
ccc
</div>
</div>
Instead of making the content div scroll you could place your header and footer fixed an let the body scroll:
HTML:
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%; /* needs to be set */
}
#header, #footer {
width: 100%;
height: 100px; /* needs to be a fixed width! */
position: fixed;
top 0;
background: lightgreen;
}
#footer {
bottom: 0;
}
#content {
width: 100%;
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
box-sizing: border-box; /* include the padding in the height */
-moz-box-sizing: border-box;
background: lightblue;
}
And a demo.
[EDIT based on your comment]
Change #content to:
#content {
width: 100%;
position: fixed;
top: 100px;
bottom: 100px;
overflow: auto;
background: lightblue;
}
Check the updated demo.
Note: instead of fixed positioning, you could also place #header, #content and #footer absolute, check this link. Result is the same though.
You can use position:absolute; on the #main and #footer like this :
FIDDLE
What I did to your code :
removed the inline styles and put them in a sperate stylesheet. This makes the code cleaner and inline styles are not recommended.
removed position:fixed; on the first container, it isn't needed for your layout.
removed unecessary css properties
changed the tags to HTML 5 tags
set html,body{height:100%;margin:0;} so the #wrap container can expand to the height of the window with height:100%; and position:relative;.
HTML :
<div id="wrap">
<header>aaa</header>
<main>bbb</main>
<footer>ccc</footer>
</div>
CSS :
html,body{
height:100%;
margin:0;
}
#wrap {
width:200px;
height:100%;
position:relative;
}
#header {
height:40px;
background-color:lime;
}
#main {
position:absolute;
width:100%;
top:40px;
bottom:30px;
overflow:scroll;
background-color:green;
}
#footer {
position:absolute;
width:100%;
bottom:0;
height:30px;
background-color:pink;
}
just add position:absolute and some bottom margin,I have added as bottom:0%;
This one works fine
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;position:absolute;bottom:1%;'>
ccc
</div>
</div>
I'm looking for a way to create a div that has a relative size, adjusted to the browser's height. Problem is that I dont really know where to start, or how to do it.
Basically I will have a header, which will be 50px heigh, and the relative div below there. Below that div, theres another div that HAS to be 50px inside the screen (Without scrolling). More content of that div, or another div (I dont mind which one) will be outside the screen.
So if the browser is 1000px heigh, 100px will be spend for the top and bottom divs. That means the relative div must be 900px heigh.
To support the idea I have made a simple image of what I'm willing to achieve: (Yeah, paint skills, got no Photoshop at my current location)
The orange border would represent the size of the complete page.
I know this is pretty easy to do with JavaScript, that wouldn't be a challenge for me, but I'm trying to find a CSS-only solution if possible. Any ideas?
An idea, using % instead of px for header and footer : here
<div id='header'></div>
<div id='content'>
<div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>
And CSS
body {
height:100%;
}
#header {
width:100%;
height:15%;
position:absolute;
top:0;
background:red;
margin:0;
}
#footer {
width:100%;
height:15%;
position:absolute;
bottom:0;
background:blue;
}
#content {
position:absolute;
width:100%;
top:15%;
height : 70%;
background:yellow;
overflow-y:auto;
}
#content #scrollable {
min-height:100%;
}
So I think this is what you want
<div id="scrn">
<div id="top"></div>
<div id="bottom"></div>
</div>
Then some CSS
#scrn {
height: 1700px;
width: 100%;
position: relative;
}
#top {
height: 50px;
width: 100%;
position: fixed:
top: 0px;
}
#bottom{
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
}
This looks right I think? Also I put the position: relative and height in because I am not 100% sure what you are trying to achieve with it.
Ok! Here's a technique I've used a bunch- this will work best if you don't fix the height of your relative positioned div. Based on your description, this is not the intent so it should work fine.
Basic Markup:
<body>
<header>DIV 1 - 50PX</header>
<div class="main">MAIN STUFF - RELATIVE</div>
<footer>DIV 2 - 50PX</footer>
</body>
CSS:
body, html{
width:100%;
height:100%;
}
body{
margin:0;
positino:relative;
}
header{
position:absolute;
width:100%;
height:50px;
top:0;
left:0;
background:#666666;
color:#ffffff;
z-index:10;
}
footer{
position:absolute;
width:100%;
height:50px;
bottom:0;
left:0;
background:#555555;
color:#ffffff;
z-index:10;
}
.main{
position:relative;
box-sizing:border-box;
padding:50px 1em;
height:150%; /* this is to simulate your dynamic content */
background:#cccccc;
}
http://jsfiddle.net/xdeQ6/1/
Adding padding to the main content div will make sure that your actual content at the top and bottom of your page is not hidden behind the header and footer divs.
Here is my approach:
header, footer {
background: #f00;
position: fixed;
width: 100%;
height: 50px;
left: 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
#content {
margin: 50px 0;
}
See my fiddle: http://jsfiddle.net/Vw97D/1/
Does it meet your expectations?
I am trying to create a two div's side by side that fill my screen 100%. The left div contains some menu and the right the content. Here's the code I have at the moment: http://jsfiddle.net/HpWZW/ . The current problem is the height is only as large as my smallest div's content. So in this case my iframe in the right column is larger than my menu items in the left column; however, the height is limited to the left divs contents not the right. Any ideas? Thanks!
Code
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
</div>
...
html, body {height: 100%}
.table {
display: table;
height: 100%;
}
.innerLeft {
display: table-cell;
min-width: 160px;
background-color: lightblue;
color: black;
}
.innerRight {
display: table-cell;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
I have ran in the same problem so many times, until I found this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
It is a valid CSS solution for making your colums share the height. Then both will be the height of the largest column.
If you want to make your colums fill the whole screen you could use something like
.innerLeft {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
}
.innerRight {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
}
Note that this is css3 and wont work for old browsers.
css3
<style>
html, body{height:100%;padding:0;margin:0;}
div.table, div.table *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
div.table{width:100%;height:100%;}
div.table div{border:1px solid black;width:50%;height:100%;float:left;}
</style>
html:
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
Page:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
div.table, div.table * {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div.table {
width:100%;
height:100%;
}
div.table div {
border:1px solid black;
width:50%;
height:100%;
float:left;
}
</style>
</head>
<body>
<div class="table">
<div class="innerLeft"> <span>Left Column</span>
</div>
<div class="innerRight"> <span>Content with Iframe</span>
</div>
</div>
</body>
</html>
The above code would create two columns whenever you would like to fill the whole screen or a section.
The following code could be used to only fill the whole screen (containers behaves odd when using position absolute, there is workarounds though):
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
#left {
width:50%;
height:100%;
position:absolute;
top:0;
left:0;
background:red;
}
#right {
width:50%;
height:100%;
position:absolute;
top:0;
right:0;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
Shortest answear is to use proper table, min-height can also help you, but not all browsers respect it.
Does this work for what your wanting?:
http://jsfiddle.net/Sgfnm/
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</div>
</div>
.table {
display: block;
}
.innerLeft {
display: block;
width: 160px;
background-color: lightblue;
color: black;
float:left;
}
.innerRight {
display: block;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
I am trying to design a web page which is divided into 3 regions:-
1) a header region
2) a left navigation pane
3) The main content area
For this, I am presently using the following CSS classes:-
.Content
{
position:absolute;
overflow:auto;
top:10%;
left:20%;
width:80%;
height:90%;
}
.Header
{
position:absolute;
left:0;
top:0;
height:10%;
width:100%;
background-color:Blue;
text-align:center;
}
.NavPanel
{
position:absolute;
top:10%;
left:0;
height:90%;
width:20%;
overflow:auto;
background-color:Menu;
}
The height and width of body tag are set to 100%.
I dont think this is a very good way of doing what I want to do. For example, when I reduce the height of the browser, the header area reduces proportionally, ultimately vanishing. Also, the page is rendered as expected by Chrome, but for some reason, horizontal scroll bar appears in IE8.
I dont have great knowledge in HTML and CSS, so I just wanted to know if there is any better way of doing this. Thanks!
You may want to specify an absolute height for the header, e.g.:
.Header
{
position:absolute;
left:0;
top:0;
height:100px;
width:100%;
background-color:Blue;
text-align:center;
}
You can also specify the header in measures of the font size: height: 10em (1 em should be the width of the letter "m"; 1 ex would be the height of the letter "x").
Note that it might be better to remove the "position" attributes both for the header and the content. In this case, positioning would be relative (the default), making the content appear below the header regardless of the size of the header. In that case, remove the "height" attribute for the content.
You could try setting a min-height on the header and using media queries.
For example, you could set min-height: 2em; and use a media-query like:
#media (max-height: 20em) { /* the min-height for the header = 10% of the max-height used here */
.content, .navPanel {
top: 2em; bottom: 0;
}
}
DEMO
However, media queries don't work in IE 8 or older.
Hi i think you are looking for page layout like this copy and paste this code into any notepad and check it out.
<html>
<head>
<style type="text/css">
.Container
{
background-color:yellow;
height:100%;
weight:100%;
}
.inner
{
float:left;
top:10%;
height:90%;
width:100%
}
.Content
{
float:left;
top:10%;
left:20%;
width:80%;
height:100%;
background-color:skyblue;
}
.Header
{
float:left;
height:10%;
width:100%;
background-color:Blue;
text-align:center;
}
.NavPanel
{
float:left;
top:10%;
height:100%;
width:20%;
background-color:Menu;
}
</style>
</head>
<body>
<div class="Container">
<div class="Header"></div>
<div class="inner">
<div class="NavPanel"></div>
<div class="Content"></div>
</div>
</div>
</div>
</body>
</html>
Here's a basic layout that you can use and expand upon:
http://jsfiddle.net/yUCdb/
You may try;
HTML
<div id="container">
<div id="header">
</div>
<div id="sidebar">
</div>
<div id="viewer"></div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
border: 0;
}
#header, #sidebar, #viewer {
position: absolute;
}
#header{
top: 0;
width: 100%;
height: 10%;
background: yellow
}
#sidebar {
top: 10%;
width: 20%;
bottom: 0;
background-color: red;
z-index:100;
}
#viewer {
top: 10%;
left: 20%;
right: 0;
bottom: 0;
background-color: green;
}
Here is a live demo.