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%
}
Related
The below code is the closet I was able to achieve and exactly how I need it to function, the only problem with this approach is that because the fixed div is layered on top of the main div, it renders the main container not clickable.
This is how I need the layout to function:
There should be three columns, the outer two columns (sidepanels, left and right) are fixed.
The header and footer are also fixed and take up the max width of the
center "main" column (and are positioned in the center like the center "main" column).
On window resize, only the width of the center column (along with the
header and footer) is auto adjusted while the side columns stay the same
width (squeezing the center column).
I am trying to avoid the use of flexbox for browser compatibility.
body {
background: #333;
color: #FFF;
margin: 0;
height: 100%;
max-width: 1240px;
margin: 0 auto;
}
.fixed {
position: fixed;
z-index: 1;
height: 100%;
width: 100%;
max-width: inherit;
}
.main {
background: #444;
position: relative;
padding: 70px 10px;
height: 1000px;
width: auto;
min-width: 280px;
max-width: 800px;
margin: 0 220px;
}
.header,
.footer {
position: absolute;
background: #555;
height: 60px;
left: 220px;
right: 220px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.left,
.right {
position: absolute;
top: 0;
width: 220px;
background: #666;
height: 100%;
}
.left {
left: 0;
}
.right {
right: 0;
}
<div class="fixed">
<div class="left">left</div>
<div class="header">header</div>
<div class="footer">footer</div>
<div class="right">right</div>
</div>
<div class="main">
main
</div>
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.
In this code I have a sticky footer and a content section above, but why height:100% doesn't work for content section?
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
height: 100%;
}
.content {
background-color: #116655;
height: 100%;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: #ffcc44;
}
<div class="content">
<div>content</div>
</div>
<footer class="footer">
My footer
</footer>
You need to set an actual height on the html
html {
position: relative;
height: 100%; /* not min-height */
}
JsFiddle Demo
Use position: absolute on the content as well, then use top: 0 and bottom: 60px this will make the content take up the remaining space. then use overflow: auto; to allow scrolling the content;
(Demo)
.content {
position: absolute;
top: 0;
bottom: 60px;
background-color: red;
overflow: auto;
}
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/