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.
Related
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>
I have two independently scrolling divs, one with a header and footer.
<body>
<div class="container col-1">
Many listings
</div>
<div class="container col-2">
<div class="header">Fixed Header</div>
<div class="content">Lots of content</div>
<div class="footer">Fixed footer</div>
</div>
</body>
See this fiddle: https://jsfiddle.net/bhmvv05n/
The problem is, I'd like the second container div to have a fixed header and footer that are always visible and have only the content scrollable.
As soon as I change the scrolling of the col-2 div, the two columns don't scroll independently anymore.
Any advice?
Thanks!
This will adjust to whatever width you have for your columns.
The idea is that you only make .col-2.content scrollable, not the whole .container.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
}
.col-1{
float: left;
width: 33%;
overflow: auto;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.col-2 .content {
position: absolute;
left: 0; right: 0;
top: 20px; /* header height */
bottom: 20px; /* footer height */
overflow: auto;
}
.header, .footer {
height: 20px;
background-color: red;
position: absolute;
left: 0; right: 0;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
Could something like this work for you?
https://jsfiddle.net/vz7eb8uc/
Code changed;
.col-1{
float: left;
width: 33%;
position: relative;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.header, .footer {
height: 20px;
background-color: red;
position: fixed;
left: 33%;
width:67%
}
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/
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/