I suppose the easiest way to show this would simply be to give a link to the website where it needs to be added.
I NEED a simple footer that is always stuck at the bottom of the page, no matter how much content is placed within the main CONTENT and SIDEBAR divs.
I've tried using the sticky footer, and a few other methods. Such as putting it at the bottom of the page with bottom 0, etc.. But, with my setup it never seems to work. If you need anymore information feel free to ask.
change the css of your site to this one...this may help you...
#Wrapper {
color: #FFFFFF;
min-height: 100%;
overflow: auto;
width: 100%;
z-index: 6;
}
#Banner {
height: 169px;
position: relative;
top: 0;
width: 100%;
}
#Navbar {
background-color: #666666;
color: #FFFFFF;
float: left;
height: 35px;
position: relative;
width: 100%;
}
#Outer {
float: left;
height: auto;
margin-top: 35px;
width: 100%;
z-index: 2;
}
#Sidebar {
background-color: #00FF00;
float: left;
margin-left: 10px;
min-height: 600px;
width: 12.5%;
}
#Content {
background-color: #00FF00;
float: right;
margin-right: 10px;
min-height: 65%;
width: 85%;
}
#Copyright {
background-color: #FF3333;
float: left;
height: 35px;
width: 100%;
z-index: 20;
}
Ok what you want is a css class that looks more or less like this.
EDIT
.MyBottomBasicClass {
position: relative;
bottom 0;
margin: 0 auto;
padding: 0;
Width: 100%;
height : 300px // or whatever...
overflow-x: hidden;
overflow: scroll;
}
EDIT
You also need to wrap your other content.
.wrapper{
min-height: 100%;
}
and...
html, body {height: 100%;}
now in your html...
<div cssClass="wrapper">
// your site content
</div>
<div cssClass="MyBottomBasicClass">
// here you enter all the information you may need to include copyright information
</div>
Related
My problem is demonstrated in the following jsfiddle. It works fine in Chrome but not in Firefox:
https://jsfiddle.net/m0u175o8/1/
There should be no pink showing up on the right side, the area above the footer should be black (canvas).
I've got a footer at the bottom of the page. The height of the footer needs to be determined dynamically based on its contents. Above it sits a canvas that should take up the remaining portion of the screen. There are a couple of other panes like a header and a side bar. I included them in the jsfiddle but I'm not sure they have effect on the problem.
In actuality, the contents of my panes are laid out using bootstrap 3 so the jsfiddle imports bootstrap.
For reference, here is the HTML:
<div class="header">header<div>
<div class="left-pane">scrollable</div>
<div class="right-pane">
<div class="canvas-wrapper">
<canvas></canvas>
</div>
<div class="bottom-pane">dynamic <br> height <br> footer</div>
</div>
Here is my CSS:
body, html {
height: 100%;
color: white;
text-align: center;
}
.header {
position: fixed;
width: 100%;
height: 20px;
background: green;
}
.left-pane {
position: relative;
float: left;
width: 25%;
margin-right: -75%;
height: 200vw;
background: blue;
z-index: 101;
}
.right-pane {
position: fixed;
top: 20px;
padding-bottom: 20px;
bottom: 0px;
width: 100%;
height: 100%;
padding-left: 25%;
float: left;
z-index: 100;
display: table;
background-color: pink;
}
.canvas-wrapper {
height: auto;
width: 100%;
display: table-row;
}
.bottom-pane {
height: 1px;
width: 100%;
background: red;
display: table-row;
}
canvas {
background: black;
width: 100%;
height: 100%;
}
I am trying setup a design where I would like a left bar for navigation and things that remains fixed and doesn't scroll, but have a content box next to it that does scroll as needed. The problem I'm running into, if I position: fixed; the first DIV it technically does what I want, but it overlaps the second DIV. I'm just creating this and using JsFiddle to test easily, so I don't have an actual working code other than this fiddle. I'll admit, I've been awake for about 30 hours now, so if this is a really silly oversight from me, please forgive me. Thanks!
FIDDLE
I tried to write this code and it is responsive too.
* {
padding: 0px;
margin: 0px;
}
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
#two {
box-sizing: border-box;
padding: 20px;
position: absolute;
left: 25%;
right: 0%;
float: right;
width: 75%;
background: #333;
}
I hope this helps.
When you add position:fixed the element is taken out of the flow and its basically functions in respect to the window .
so the following CSS :
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
25% is 25% of the window not 25% of <div id="wrap">(and hence the overlap) , if you take off the position:fixed you'll see no overlap .
with position fixed , you probably want to have some left offset on <div id="two">, you cal experiment with :
margin-left: // DO YOUR MATH.
padding-left: // DO YOUR MATH.
You already have height: 400px; on your over div so specify the height to #one too http://jsfiddle.net/ypL8ypsf/5/
#one {
position:fixed;
width:16%;
background: #666;
height:384px;
}
Hope this will help
This changes in css will solve your problem
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#one {
position: fixed;
width: 25%;
background: #666;
height: 100%;
display:inline-block;
}
#two {
width: 70%;
background: #333;
height: 100%;
display:inline-block;
overflow:hidden;
margin-left:29%;
}
.clear {
clear: both;
}
If you have position :fixed on an element. it can only controlled by the browser window, cannot control by parent div. so if you add width: 25% it fill up 25% of your browser window. not in parent div.
i have 2 solutions,
use javascript. dynamically add width in 'px' and add position:
fixed after
use position: absolute. instead of fixed. ( actually your height is 100% so it doesn't matter your position fixed. )
1nd solution: javascript approach [sample code]:
//remove position:fixed from #one
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var calWidth = $("#one").width(); //get the width
$("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div
</script>
2nd solution: CSS approach [sample code]
#wrap{
position:relative;
}
#one{
position:absolute;
}
Try overriding your current float and position styles with:
float: left; and
position: relative;
Instead of fixing that DIV, I've float them both to the left and give the second DIV overflow-y scroll property.
Hope this can help you:
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
}
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
overflow:hidden;
}
#two {
float: left;
width: 75%;
background: #333;
height: 100%;
overflow-y: scroll;
}
.clear {
clear: both;
}
If it is not usefull you always can try some framework with default sidebars.
Although you could add some margin to the second div to displace it to the right, I don't think you should use fixed for this.
You should do this:
<div class="div1">This is not moving</div>
<div class="div2"> Loren ipsum...</div>
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.div1{
background: #DDD;
width:40%;
height: 100%;
float: left;
overflow: hidden;
}
.div2{
background: #EEE;
width:60%;
height: 100%;
float: left;
overflow-y:auto;
}
Here is a pen for you: http://codepen.io/vandervals/pen/bdBWJV
I managed to do what you want but by adding more div.
the HTML would be
<div id="wrap">
<div id="testone"><div id="one"></div></div>
<div id="test"><div id="two">Lorem ipsum...
</div></div>
<div class="clear"></div>
and the css then
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#testone{
float: left;
width: 25%;
background: #666;
height: 100%;
}
#one {
position: fixed;
}
#test{
float: right;
width: 75%;
height: 100%;
}
#two {
background: #333;
}
.clear {
clear: both;
}
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/
I'd like to have my header fixed: header is always at the top of page and my whole content (everything including footer) could be scrolled. Header is 60 px high as you can see below and it's not the problem to make it fixed at the top.
The problem I want to solve (using only CSS) is to have scrollbar starting below these 60 pixels from the top.
As you can see, the bottom of the scrollbar (2. arrow) is actually hidden/moved down. I guess by my problematic 60px.
So it goes like this:
HTML:
<!DOCTYPE html>
<head>
...
</head>
<body>
<header>
...
</header>
<div id="content">
...
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 60px;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 60px;
height: 100%;
width: 100%;
overflow-y: scroll;
}
What am I missing in my CSS?
Thanks guys.
// Edit as a reply to the forst answer here (to John Grey)
Commentary below your comment:
Here is a jsfiddle how to solve your problem:
http://jsfiddle.net/sTSFJ/2/
Here is the css:
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: 100%;
margin: auto;
position: relative;
}
#header {
height: 40px;
background-color: blue;
color: #fff;
}
#content {
position:absolute;
bottom:0px;
top: 40px;
width:100%;
overflow: scroll;
background-color: #fff;
color: #666;
}
Your #content height is equal body height, but you have a header so... Try use this:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 5%;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 5%;
height: 95%;
width: 100%;
overflow-y: scroll;
}
You can solve this using the calc property. That is instead of height 95%, since you don't know if 5% == 60px rather do the following:-
#content {
margin-top: 5%;
height: calc(100%-60px);
height: -webkit-calc(100%-60px); /*For webkit browsers eg safari*/
height: -moz-cal(100%-60px); /*for firefox*/
width: 100%;
overflow-y: scroll;
}
I am currently working on a HTML5 and CSS project and am having a problem getting the containers to display properly.
What I want to have is a header bar at the top, a wrapper that contains 2 other divs and then a footer at the bottom which is always at the bottom of the window or at the bottom of the content whichever is further down.
Here's a snippet:
html, body
{
padding: 0;
margin: 0;
}
#wrapper
{
position: absolute;
background-color: purple;
height: 100%;
width: 100%;
margin-top: 0px;
}
header
{
position: absolute;
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer
{
background-color: blue;
width: 75%;
margin-left: auto;
margin-right: auto;
height: auto;
margin-top: 80px;
}
#articleContent
{
width: 70%;
background-color: yellow;
float: left;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
float: right;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
float: right;
height: auto;
}
<html>
<head>
<title>index</title>
<link href="ArticleStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<div id="articleContainer">
Article Container
<div id="articleContent">
The quick brown fox jumped over the lazy dogs back. All good men must come to the aid of the party
</div>
<div id="articleSidebar">
Article Sidebar
</div>
</div>
</div>
</body>
</html>
At the moment the articleContainer is only the height of however many lines there are. What I want to have is the formContainer to fill the rest of the screen, I've tried adding the height: 100%; attribute but then this feels the form container over the screen size. I.e. a vertical scrollbar appears which is about the same height as the header. How can I get the formContainer to fill the available screen space without the scroll bar. However, if the content is larger than the form container should expand to fill the extra space.
Thanks for any help you can provide.
If you really want a css3 solution the one you're looking for is setting height: calc(100% - 80px); on #articleContainer as demonstrated in this fiddle, however this will not work in all browsers.
Example using old flexbox model css:
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
#wrapper
{
display: -webkit-box;
-webkit-box-orient: vertical;
min-height: 100%;
background-color: purple;
width: 100%;
margin-top: 0px;
}
header
{
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer {
width: 75%;
margin: auto;
background-color: blue;
display: -webkit-box;
-webkit-box-flex: 1;
}
#articleContent
{
width: 70%;
background-color: yellow;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
height: auto;
}
same thing, but this time using new flexbox model
css
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
#wrapper
{
display: -webkit-flex;
-webkit-flex-direction: column;
min-height: 100%;
background-color: purple;
width: 100%;
margin-top: 0px;
}
header
{
width: 100%;
height: 80px;
background-color: black;
color: white;
}
#articleContainer {
width: 75%;
margin: auto;
background-color: blue;
display: -webkit-flex;
-webkit-flex: 1;
}
#articleContent
{
width: 70%;
background-color: yellow;
}
#articleSideBar
{
position: relative;
width: 28%;
background-color: green;
margin-left: 2px;
margin-right: 2px;
display: inline;
margin-top: 0px;
height: auto;
}
version with only the paragraph in yellow
I've used this method before, the tricky part is getting the header and footer in the right location. Once you have that the rest should fall into place:
jsfiddle:
http://jsfiddle.net/Ug5JR/
css:
html, body { margin: 0; padding: 0; height: 100%; }
header {
position: relative;
display: block;
background: red;
height: 100px;
z-index: 1;
}
article {
display: block;
background: yellow;
min-height: 100%;
margin-top: -100px;
margin-bottom: -100px;
}
article section {
display: block;
padding-top: 100px;
padding-bottom: 100px;
overflow: hidden;
}
footer{
display: block;
background: blue;
height: 100px;
}
p:hover {
height: 4000px;
}
markup:
<header></header>
<article>
<section>
<p>Hover me and I'll push the content larger than the page</p>
</section>
</article>
<footer></footer>
The trick is to get the negative margins to absorb the space used by the header and footer, this causes the 100% calculation to correct itself. You can then use any internal element to counter the negative margins with padding or margin on top and bottom. So whilst your article element is pretty much 100% height of the page, your article > section element will appear the right height and lay it's children out correctly.