Ok i have problem to force footer on bottom when not enough content to push it there naturally.
I partially solved problem. It is rly simple design, i have header, content and footer, all inside div wrapper.
html,
body {
margin:0;
padding:0;
height:100%;
font: sans-serif;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding: 2% 5%;
max-width: 940px;
margin: 0 auto;
padding-bottom:80px; /* Height of the footer element */
clear: both;
background-color: yellow;
}
footer {
background:#ffab62;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
font-size: 0.75em;
text-align: center;
padding-top: 30px;
clear: both;
color: #ccc;
}
I have used background color to see position of elements on page. So when there is not enough content footer is on bottom and it is OK. When there is more than enough content footer is overlapping some of it, it gets fixed when i put position on footer relative instead of absolute but then on pages where there is not enough content footer is not on bottom.. Fixing one other is not good and fixing that other first page is not good.. Is there any solution that can help me solve this...
Adjust your min-height: to the minimum value where you want your footer to end up, 100% will put it right below your content (which should be the default anyway without even declaring) which you said isn't long enough; make a minimum-height: 900px; or similar to where you want the minimum end point to be where the footer will live.
If the footer is in the correct place in the HTML but it is floating up. Then consider the below.
display:inline-block;
add to footer.
footer {
display: inline-block;
}
If these don't work, show your HTML!
You nearly did it :)
Your content div is overlaping the sticky footer because of its height. Just use a height: calc(100% - footer_height); and start your content where your header finishes.
This is a JSFiddle example of this usage.
CSS file
html,
body {
margin: 0;
height: 100%;
}
.container {
min-height: 100%;
position: relative;
}
.header {
background: #d6d6d6;
position: absolute;
height: 80px;
width: 100%;
top: 0;
left: 0
}
.content {
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: calc(100% - 80px);
background: yellow;
}
.footer {
background: #d6d6d6;
position: absolute;
height: 80px;
bottom: 0;
left: 0;
width: 100%;
clear: both;
}
I hope it is useful.
Related
I am working on a small personal project to try and relearn HTML & CSS and I am having some issues with pinning the footer of my site to the bottom of the page.The site can be found here.
I have tried searching online and found that my footer CSS should have the following:
bottom: 0;
position: fixed;
This does pin it to the bottom but it exceeds the width of my container and doesn't look right. Can anyone help?
Thanks.
You have to understand how position: fixed; is working. It ignores any surrounding element. ie. A fixed position element is positioned relative to the view-port, or the browser window itself.
Your .container styles are:
margin: auto;
width: 75%;
So apply this also to the footer:
footer {
bottom: 0;
margin: auto;
width: 75%;
position: fixed;
height: 300px;
background: #2D2D2D;
border-top: 12px solid #3E3E3E;
}
you can try to play around with the width of the footer to see what fits. e.g.
width: 100%;
bottom: 0;
position: fixed;
try this:
body {
line-height: 1;
height: 100%;
display: table;
width: 100%;
}
footer {
display: table-row;
height: 1px;
width: 100%;
}
footer:before, footer:after {
content: " ";
display: table;
}
footer:after {
clear: both;
}
I have big doubt about fixed, relative , absolute container
I have a css code like this
.header {
position:fixed;
width:100%;
height:60px;
}
.page, .footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
}
and my html code like this...
<div class="header">--fixed content--</div>
<div class="page">--page content</div>
<div class="footer">--footer content--</div>
I have used bootstrap for button styles. problem is the header div is fixed but the content inside the page & footer goes over the header content. When I remove position:relative; from page & footer css it works fine. But also bootstrap buttons goes still goes up.
try this:
.header {
position:fixed;
width:100%;
height:60px;
background: black;
color: white;
top: 0;
left: 0;
z-index: 10;
}
.page {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #999;
height:500px;
color: white;
padding-top: 60px;
margin: auto;
}
.footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #666;
height:100px;
color: white;
margin: auto;
}
Fiddle Example
Adding a z-index will keep your header always on top of other content. You can change its value as per your content.
add the padding-top to your '.page' to avoid any overlapping of header on the body content.
You should be using like this:
.header {
position:fixed;
width:100%;
height:60px;
z-index: 99999999;/*adding higher index value than other divs*/
/* This will ensure the header div always on top of other divs */
}
.page{
position: relative;
top: 61px;/* plus 1px height as of .header or use as per your requirement */
/* but at least this should be 60px to show your .page div */
}
Then, just other divs you don't need to define the top value for this issue(overlaps).
I have read all the tutorials on how to make the footer at the bottom of the webpage but still i'm unable to do it for my site.
The links i have referred are
How do you get the footer to stay at the bottom of a Web page?
Making my footer stick to bottom of the page
Ways to stick footer to the bottom a page
making the footer stick the bottom
None of it worked..!
CSS
#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}
Here is the dummy fiddle of my site
Fiddle
This is the fiddle i have tried but there is a bug in it too
http://jsfiddle.net/andresilich/fVpp2/1/
Try this:
<div id="container">
<div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>
CSS:
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content { padding-bottom: 3em; }
Add/Edit as following
#body {
margin-bottom: 85px;
position: relative;
}
#footer1 {
position: fixed;
}
I guess this is what you want
* html #form1 {
height:100%;
}
#form1 {
min-height: 100%;
position: relative;
}
#body {
padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}
#footer1 {
position: absolute;
width: 100%;
clear: both;
bottom: 0;
padding: 0;
margin: 0;
}
Following the code of this method - you need to to:
1) Place your footer outside the form
2) Add height: 100% on form
3) Set negative bottom margin to form according to the height of the footer.
form {
min-height: 100%;
height: 100%;
margin: 0 auto -150px; /*footer 150px high */
}
Modified Fiddle
I am building a website and I am facing some problems with the scrollbar for divs. I have a fixed header and footer and the divs in between must stay between the header and footer. In case of overflow a scroll will appear.
What I am Trying is similar to How to get a scrollbar in a div with fixed header and footer?
But I cant make it work correctly.
JS Fiddle of What I Am Trying
Fiddle
I could make it work by giving body{height: 84%;} but it will different in different browsers.
EDIT:
Now that jsfiddle is back...
Here is an updated fiddle for what you wanted
the following is the main change that was necessary:
div[role="main"]
{
height: 100%;
background: pink;
margin: -70px 0 -30px;
padding: 70px 0 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #4CD3BF;
}
Do something like this:
Not much content: CODEPEN1
Lots of content: CODEPEN2
Markup
<div class="container">
<header></header>
<div class="content"></div>
<footer></footer>
</div>
CSS
/* Assuming header and footer height of 64px */
.container
{
height: 100%;
background: pink;
margin: -64px 0;
padding: 64px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
overflow:auto;
height:100%;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 64px;
background: gray;
position: relative;
z-index:1;
}
there are more than 1 answers to this problem. the easiest way to do this is to wrap the main content (so no header and footer) in a absolute positioned div. set the divs to to the bottom of the header and the bottom to the top of the footer eg
fiddle: http://jsbin.com/onipiq/2/edit
css :
body{
margin: 0;
padding: 0;
}
header{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100px;
background: #eee;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background: #eee;
}
.contentContainer{
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
overflow-y: scroll;
}
.content{
position: relative;
width: 960px;
margin: 0 auto;
}
Note that this example will not scroll on most touch devices but will work fine on desktop.
I'm trying to make a sidebar and this is what I'm expecting:
Header fixed top and Footer fixed bottom ( I don't know if 'fixed' is the right term, but I want them not to overlap the sidebar container )
Scrollable sidebar-container
I tried to play with position of the div but it didn't work.
I also tried sticky footer's approach and It didn't work so well.
I tried googling my problem, but most answers are the whole layout of the website.
I need it working inside my sidebar.
Here's my: jsFiddle
The code is kinda long so I'm just gonna post the CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer {
height: 60px;
}
.container-fluid {
width: 100%;
height: 100%;
}
#content {
position: absolute;
width: 100%;
bottom: 60px;
top: 42px;
right: 0px;
left: 0px;
padding: 0px;
}
#sidebar {
position:absolute;
width:300px;
height:100%;
}
#sidebar .ul-menu {
margin:0px;
}
#sidenavbar .tabs-left>.nav-tabs>li>a{
margin: 0px;
min-width: 30px;
width: 70px;
-webkit-border-radius: 0px 0 0 0px;
-moz-border-radius: 0px 0 0 0px;
border-radius: 0px 0 0 0px;
border: 0px;
}
.sidebar-tab-content {
background: #FFF;
position: absolute;
height: 100%;
left: 94px;
width:100%;
}
#sidenavbar .tabs-left>.nav-tabs {
border: 0px;
}
#footer {
color: #FFF;
background-color: #666;
}
.side-header, .side-footer {
background: #AAF;
}
h2 {
margin: 0px;
}
Thanks for the ideas. I solve my problem just now by adding these css codes:
.side-header {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.side-container {
position: absolute;
bottom: 40px;
top: 40px;
overflow-y: auto;
}
.side-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Here's the JSFiddle: http://jsfiddle.net/geddemet/XCn7C/
This community is really helpful. Cheers!
I use this for my footer. it works for me, the header and footer stay in the same place and the footer will expand if the content with the scroll bar gets bigger. As for the box with the scroll bar, I believe you need to have something like overflow:hidden in the CSS for the box that you want to have a scroll bar on.
You can apply overflow: auto to your content div.
See this minimal example of how it would work.
Take a look at my sample
sample
It was not good when you set place the side bar and right content into position absolute. Your design should have to get you in trouble if right content is not predictable and make more custom on it.
.sidebar-tab-content {
background: #FFF;
width: 100%;
height: 500px; /*you could change it to 100% depend your need*/
}
Edited: Please look inside my jsfiddle sample code instead, the above proportion of CSS which I placed here was just small one of the changes
Your looking for position: fixed
FIDDLE Full screen Normal Fiddle
CSS:
.side-header{
background: #AAF;
position: fixed;
width: 100%;
}
.side-footer {
background: #AAF;
position:fixed;
bottom:60px;
width: 100%;
}
But you are going to have to play around with the width's because it's taking the container width div.