I've created the below jsfiddle recreating my problem, I want that the .dashboard & .inner-dashboard have always a 100% height and keep the footer always at the bottom.
http://jsfiddle.net/rv7xN/1/
HTML
<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
</body>
</div>
<div id="footer"></div>
CSS
html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}
Here's an example : jsFiddle
I had to modify the html to have a common container for the dashboard and the footer.
<div id="wrap">
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
<div id="footer"></div>
</div>
I turn the wrapper (common container) in a table and the other elements in table-cell.
So even if your dashboard is height 200%, the footer's still at the bottom.
html,body{
height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}
.dashboard{
width: 95%;
height: 200%;
display:table;
border:5px solid green;
}
.inner-dashboard{
width: 95%;
height: 100%;
display:table-cell;
border:5px solid red;
}
#footer {
display:table;
height: 60px;
width:95%;
border:5px solid blue;
bottom:-10px;
}
Is that it ?!
I have added modified your css and added position attribute
I hope the revision solves your issue: [UPDATE] http://jsfiddle.net/saurabhsharma/rv7xN/3/
Related
I'm new with DIV's and I would like to build a simple template for my website.
I need the header to be fixed and 100%, left panel for menu 200px, right panel for main 100% div and bottom panel.
I need that if the left panel doesn't show that the main will be 100%. now if it show's the "main" div in under the left panel. 10X
<div id="top_menu"></div>
<div id="left_menu"></div>
<div id="main"></div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
#left_menu{
margin-top:40px;
float: left;
width: 200px;
background: #F4F4F4;
position: fixed;
z-index: 10;
}
#main{
margin-top:40px;
float: right;
background:red;
padding:30px;
width: 90%;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}
Update your HTML and CSS like below.
HTML
<div id="top_menu"></div>
<div class="distab">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
CSS
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
z-index: 20;
}
.distab{display:table; table-layout:fixed;}
#left_menu{
margin-top:40px;
width: 200px;
background: #F4F4F4;
z-index: 10;
display:table-cell;
}
#main{
margin-top:40px;
background:red;
padding:30px;
width: 100%;
display:table-cell;
box-sizing:border-box;
}
#bottom{
height:30px;
position: fixed;
width:100%;
}
DEMO
<div id="top_menu"></div>
<div id="content">
<div id="left_menu"></div>
<div id="main"></div>
</div>
<div id="bottom"></div>
#top_menu{
height: 40px;
background-color: #343B43;
width:100%;
position: fixed;
}
#lineContainer{
overflow: hidden; /* clear the float */
}
#left_menu{
margin-top:40px;
float: left;
max-width: 200px;
background: #F4F4F4;
}
#main{
margin-top:40px;
background:red;
padding:30px;
overflow: hidden;
}
#bottom{
height:30px;
width:100%;
}
Demo here:
http://jsfiddle.net/msankhala/Ck7pe/3
http://jsfiddle.net/msankhala/Ck7pe/3/embedded/result/
for this you have to put your left menu and main under one div & put leftMenu to the height of 20% and then you will see that main had automatically taken remaining area of its parent div and when leftMenu get disappeared main will automatically take the full 100% area.
You can use Javascript for disappearing purpose but jquery is best to do this all task.
I have a footer div that sits on the bottom with a min-height: 100% parent named #container. That's working great, but I'm trying to make the height: 100% for the div named #content and I can't seem to get it. Any ideas?
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
background: rgb(226,226,226);
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
height: 165px;
width: 70%;
margin-left: auto;
margin-right: auto;
background: rgb(142,0,0);
}
#content {
padding:10px;
padding-bottom:100px;
width:70%;
left: 15%;
height: 100%;
margin-left: auto;
margin-right: auto;
background: rgb(252,252,252);
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
width: 70%;
left: 15%;
background: #1e5799;
}
HTML:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Demo Fiddle
Add a new rule:
#header, #footer, #content{
box-sizing:border-box;
}
Then add the below to your rule for #content, also removing height:100%:
position:absolute;
bottom:100px; /* <--height of footer */
top:165px; /* <--height of header */
We're building an application to run on both desktop and mobile, so we're making our site as dynamic as we can.
In the new design, we've got a full width, fixed top, fixed-height header, followed by a max-width header, fixed position header, max-width footer bottom-fixed, and a center scrollable area to fill up the rest of the vertical space.
I've got the headers and footers fixed and seemingly working right, but the center body isn't filling the center space.
Here's the code and fiddle I've been working in: http://jsfiddle.net/chazthetic/KE5cX/2/
<div id="top">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
<div id="sub">
<div id="mid">
<div id="inside">
<div id="insideHeader">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
<div id="insideInner">
<div id="div" style="float:left;color:white;">a
<div id="div" style="float:right;color:white;">1
</div>
</div>
<div id="bot">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
</div>
</div>
And the accompanying CSS:
* {
margin: 0;
}
html, body {
margin: 0;
}
#top {
height: 100px;
width: 100%;
background: #f00;
z-index: 5;
margin:0px;
padding:0px;
position:fixed;
top:0px;
}
#sub {
position:relative;
width: 100%;
margin:100px 0 0;
height:100%;
}
#mid {
background: #222;
width:100%;
max-width:400px;
height:100%;
margin:0 auto;
}
#push {
height: 150px;
}
#inside {
width:100%;
height:100%;
padding:0 0 0 0;
margin:50px 0 50px;
overflow:auto;
}
#insideHeader {
height:50px;
background: #0ff;
width:100%;
margin:100px auto 0;
top:0px;
position:fixed;
max-width:400px;
}
#insideInner {
height:100%;
width:100%;
display:table;
overflow:auto;
}
#inside #div {
height: 50px;
width: 50px;
background: #888;
border: 1px solid #fff;
}
#bot {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
max-width: 400px;
background: #0ff;
z-index: 2;
margin:0px auto;
left:auto;
right:auto;
}
Am I missing something to make the inside div work right? Is this solution even possible?
I figured it out!
Turns out it is possible and I was missing height:100%; on the body tag.
Once I added that, the center area filled up the space and voila, it scrolled! I also needed to add a bit of padding to the insideInner div (thanks #alireza) so the header didn't overlay any of it.
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="inner-wrap">
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOTTER
</div>
</div> </body>
AND CSS:
html { height:100%; max-height:100%; }
body {
margin:0;
padding:0;
height:100%;
max-height: 100%;
}
#wrap {
min-height:100%;
height: 100%;
position:relative;
}
* html #wrap { height:100% }
#inner-wrap {
padding-bottom:50px;
min-height: 100%;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
* html #inner-wrap {
height:100%;
}
#header
{
width: 100%;
background-color: #C0C0C0;
height: 16px;
color: White;
text-align: center;
position: relative;
top:0px;
}
#footer
{
width: 100%;
background-color: #C0C0C0;
height: 50px;
position:absolute;
bottom: 0;
color: White;
text-align: center;
}
#content
{
width: 1000px;
height: 100%;
background-color: #F5FDEC;
margin: 0 auto 0 auto;
}
The Problem:
How i can make this: HEADER top 16px,
CONTENT dynamic 100% height,
FOOTER at end of page
If i give 100% to inner-wrap DIV, them after footer is white space.
Thx
You have too many heights going on:
Remove the min-height and max-height values from your selectors.
Remove the position: absolute; from your #wrap div.
I made an example for you here.
For the footer positioned at the bottom in a fixed position that doesn't move when you scroll the webpage use this:
#footer{
position:fixed;
clear:both;
}