My simple layout contains header, main section and footer. Footer pushed to bottom of a page. And I want main section to take all the space between header and footer. Here is what I've done: http://jsfiddle.net/5d3m9/
HTML
<div class="wrap">
<header>header</header>
<div class="main">lorem2000 </div>
<div class="clear"></div>
<footer>#Copyright</footer>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
header {
height: 150px;
background: orange;
}
.wrap {
min-height: 100%;
position: relative;
overflow: hidden;
}
.main {
background: #00eaea;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
.clear {
height: 50px;
}
footer {
background: #dadada;
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}
Is there any other/better way to achieve this? (without padding-bottom: 32767px; margin-bottom: -32767px;)
Apply the following style to .main
.main {
background: #00eaea;
top: 150px;
bottom: 50px;
position:absolute;
width: 100%;
}
http://jsfiddle.net/5d3m9/1/
Related
here is my code: http://jsfiddle.net/fxWg7/4041/
I want to make the left sidebar extend down to the footer dynamically. The footer is a sticky footer which means it will stay down there no matter how long the main content is.
I want the left sidebar to extend down to the footer no matter the height of the main content.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 50px;
/* bottom = footer height */
}
.container {
height: auto;
overflow: hidden;
}
.left {
width: 180px;
float: left;
background: #aafed6;
}
.right {
float: none;
/* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="left">
left content fixed width
<br>
<br> I want this to extend to footer!
</div>
<div class="right">
right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
</div>
</div>
<footer>
This is my footer.
</footer>
UPDATED:
The following css code will do it:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
display: flex;
flex: 1;
}
.left {
width: 180px;
background: #aafed6;
}
.right {
width: auto;
background: #e8f6fe;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
View jsfiddle - http://jsfiddle.net/jalenconner/be71229w/1/
This solution utilizes CSS Flexbox, which you can learn more about here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html {
position: relative;
height: 100%;
}
body {
height: 100%
}
.container {
/* Full Height - height of footer*/
height: calc(100% - 50px);
display: flex;
flex-direction: row;
}
.left {
width: 20%;
float: left;
background: #aafed6;
height: 100%;
}
.right {
background: #e8f6fe;
width: 80%;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}
.footer-text {
padding: 1em;
}
Just a little tweak to the body tag fixes it
*,
*:after,
*:before {
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html {
position: relative;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.container {
height: inherit;
overflow: hidden;
}
.left {
width: 180px;
float: left;
background: #aafed6;
height: calc(100% - 50px);/**deduct heght of footer**/
}
.right {
float: none;
/* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other
floated one */
width: auto;
overflow: hidden;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<body>
<div class="container">
<div class="left">
left content fixed width
<br>
<br> I want this to extend to footer!
</div>
<div class="right">
right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
<br>
<br> right content flexible width
</div>
</div>
<footer>
This is my footer.
</footer>
</body>
html {
position: relative;
}
body {
margin-bottom: 40px;
}
html, body {
height: 100%;
}
.container {
overflow: auto;
display: flex;
min-height: 100%;
}
.left {
width: 180px;
background: #aafed6;
}
.right {
background: #e8f6fe;
width: auto;
overflow: hidden;
}
footer {
width: 100%;
background-color: #000;
color: #fff;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
}
Use above CSS code, you will get desired output with fixed footer and content with 100% height.
I am trying to make the footer stay at the bottom of the page, NOT the bottom of the screen (fixed) but at the bottom of the entire page, so you can only see it after scrolling to bottom. However, for some reason it stays above the bottom, and I can't seem to find the reason...
FIDDLE:
https://jsfiddle.net/okfudezn/
Image:
HTML (the div has no wrappers etc):
<div class="footer">
<a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
</div>
CSS:
.footer {
background-color: #4b4c46;
height: 55px;
line-height: 55px;
width: 100%;
text-align: center;
color: #e1dac5;
font-size: 14px;
}
Just change replace you content div height to auto
updated fiddle
.content {
position: relative;
width: 650px;
height: auto;
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
margin: 0 auto;
margin-bottom: 80px;
top: -100px;
}
I would try with:
.footer {
position: absolute;
bottom: 0;
}
Change this css
.content {
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
/*height: 650px;*/ /*Remove this*/
margin: 0 auto 30px;/*Change this*/
overflow: hidden;/*Add this*/
position: relative;
/*top: -100px;*//*Remove this*/
width: 650px;
}
.grid {
width: 600px;
/*height: 1000px;*/ /*Remove this*/
margin: 0 auto;
padding-top: 30px;
}
https://jsfiddle.net/okfudezn/
Here you go!
html, body {
margin:0;
padding:0;
height: 100%;
}
#container {
position: relative;
height: auto;
min-height: calc(100% - 54px);
padding-top: 54px; /* Header & Footer */
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 54px;
background: red;
}
#content {
background: orange;
height: 100%;
}
#footer {
position: absolut;
bottom: 0;
width: 100%;
height: 54px;
background: yellow;
}
.simulateContent {
height: 1000px;
}
<div id="container">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT START
<div class="simulateContent"></div>
CONTENT END
</div>
<div id="footer">
FOOTER
</div>
</div>
There is a block with header, body and footer parts inside of it. Header and footer heights are fixed, body height is determined by its content. I need the outer block size to be the size of its contents but not more then the size of its container. If the body height exceeds maximum possible size, then the y-scroll is shown for body, but header and footer stay at the top and bottom of outer block.
I made the FIDDLE. But I could only get as far as when I resize window the scroll appears for outer block, not for body block only.
This is CSS and HTML:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
max-height: 100%;
overflow: auto;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
}
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>text<br>...</div>
<div class='footer'></div>
</div>
</div>
Is it possible to do what I need without using JavaScript?
EDIT: I made an image to make it clear what I need.
Well Here is your code from what I understand that you want the header
sticks to top and footer in the bottom and you can scroll the body if
necessary in the container size.
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>text
</div>
<div class='footer'></div>
</div>
</div>
We need to style the footer and header separately plus your style as you will see in the code below
So you add to .innerContainer (position: absolute; bottom: 0; right: 0; left: 0; height: 100%; overflow: hidden;) and for the .body you add(height: 50%; overflow-y: auto;)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
height: 100%;
max-height: 100%;
overflow: hidden;
bottom: 0;
top: 0;
right: 0;
left: 0;
position: absolute;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
min-height: 20px;
max-height: 36%;
overflow-y: auto;
font-size: 20px;
}
I hope that what you want and if you have any question please let me know.
The only solution I've found is using CSS3 calc. Doesn't work in Android browswer, though... FIDDLE
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
overflow: hidden;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
height: 300px;
background: green;
}
.bodyContainer {
max-height: calc(100% - 60px);
overflow-y: auto;
}
<div class='container'>
<div class='header'></div>
<div class='bodyContainer'>
<div class='body'></div>
</div>
<div class='footer'></div>
</div>
I need to have the wrapper div element to be full height and so adjust its height depending on the whole height of the page so no scrollbars are displayed.
My html:
<header>
I am the header and my height is fixed to 40px.
</header>
<div id="wrapper">
I am the wrapper
</div>
My css:
html,body {
height: 100%;
background: blue;
margin: 0;
padding: 0;
}
header {
height: 40px; <-------- this value is fixed
background-color: green;
}
#wrapper {
height: 90%;
background-color: red;
}
I know the height: 90% on the wrapper is wrong but I don't know what to do.
Here is the jsFiddle: https://jsfiddle.net/3putthcv/1/
You can use CSS calc():
#wrapper {
height: calc(100% - 40px); /* 40px is the header value */
background-color: red;
}
JSFiddle
Or display:table/table-row:
html,
body {
height: 100%;
width: 100%;
background: blue;
margin: 0;
padding: 0;
}
body {
display: table;
width: 100%;
}
header {
display: table-row;
height: 40px;
background-color: green;
}
#wrapper {
display: table-row;
height: 100%;
background-color: red;
}
<header>I am the header and my height is fixed to 40px.</header>
<div id="wrapper">I am the wrapper</div>
JSFiddle
What about setting the size based on the top, left, right and bottom like this (demo) (full disclosure, it won't work if the content is too large):
#wrapper {
background-color: red;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 40px;
}
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/