I'm trying to get a sticky footer on a page with 100% heigth in every tag.
My problem is that, if the content is bigger than the display and I scroll downwards, the footer is no longer at the bottom of the page.
The footer stays at the position like this: Picture of the footer
Here is an example:(Sorry that was the wrong link..)
http://jsfiddle.net/qt3m1p4c/
<html style:"height: 100%">
<body style:"height: 100%">
A lot of Content
</body>
<footer style:"position: absolute; bottom: 0;">
Sticky Footer
</footer>
</html>
Does someone no how to fix this, without removing the heigth attributes?
You need to set position: fixed to your footer, this means whatever happens on your page, this element will stand in same place, here your code with changed position
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background:#ccc;
}
Put the footer INSIDE the content wrapper and change the CSS as follows:
.pageContentWrapper {
padding-bottom:100px;
min-height: 100%;
position: relative;
box-sizing: border-box;
}
.footer {
position: absolute;
[...]
}
Here's a fiddle: (EDITED, I forgot to add box-sizing: border-box; at first): http://jsfiddle.net/uc6y5dhs/1/
Related
i have to divs
one is fixed and its the header for all pages
and the ather is the content
and this is my code
<style>
#print-head {
display: none;
}
#media print {
#print-head {
display: block;
position: fixed;
top: 0pt;
left:0pt;
right: 0pt;
text-align: center;
}
}
</style>
<div id='print-head'>
page header herer for all page
</div>
<div id='content'>
content here coming from foreach loop
</div>
my problem the div content gat many many lines thats print preview in the first page everything is ok
the header with content looking like this
but in the next page the content will be stack with header like this
i need a code to make content div always get margin from top not just in the first page
how can i clear:both margin between first div and the second div in every page thanks a lot
Try
#print-head {
position: absolute;
top: 0px;
left:0px;
width: 100%;
text-align: center;
padding: 20px 0;
}
I am trying to make a drawer fade in effect on my page. I need to make a div that takes 100% of the height of the screen. And then on click of the button another div fades in and takes over the screen. Not sure how to do that?
This is my html:
<html lang="en">
#section('head')
#include('customer.layouts.partials.head')
#show
<body>
<div id="app">
<div class="main-section">
#section('topBar')
#include('customer.layouts.partials.top-bar')
#show
#section('header')
#include('customer.layouts.partials.header')
#show
#section('carousel')
#include('customer.layouts.partials.carousel')
#show
</div>
<div "id="magazine-detail">
#section('magazine-detail')
#include('customer.layouts.partials.magazine-detail')
#show
</div>
<div class="large-10 large-centered columns content">
#yield('content')
</div>
</div>
#section('scripts')
#include('customer.layouts.partials.scripts')
#show
</body>
</html>
CSS:
.magazine-detail {
display: none;
}
html, body {
height: 100%;
}
.main-section {
height: 100%;
}
Here the div main-section should take 100% height, and div magazine-detail should fade in on a click of a button. I wonder how to achieve that?
I am struggling with setting the the first div to 100% height when magazine-detail is first hidden.
You need to give your pages an absolute position.
First make your #app a relative container, this way, any of its child elements with absolute positioning will be positioned relative to the parent.
#app {
position: relative;
height: 100%;
}
Next, give your "pages" an absolute position and size them. This will cause them to be positioned in the top left corner of the #app container and fill the width and height of it.
.main-section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#magazine-detail {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
You can control which layer is on top by adding z-index attributes to the "pages".
I have a problem with sticky footer which has absolute position,
<div class="wrapper">
<div class="content">
<p>Content</p>
</div>
<div class="footer">
Footer
</div>
</div>
body {
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%
}
.wrapper {
position: absolute;
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
overflow: auto;
background: blue;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
When I do scroll down my footer also scrolled, when I remove height:100% footer works fine but I need height:100% for my scroll bar for wrapper because I disabled it in body (I need do it). I want to retain height:100% for body and .wrapper but that footer was always at bottom. How can I do it using css ?
i got the same issue, use height: 100vh; i hope works for you!
If you need your footer to always be at the bottom look at this fiddle: http://jsfiddle.net/2n9okg1b/3/
In the fiddle I amd using poition: fixed; in the footer CSS. Fixing the position tells the browser to always keep the elements where you defined them to be.
Update
I have updated the fiddle link. http://jsfiddle.net/2n9okg1b/3/
With this update I detect with jQuery if the footer is below the window. If the footer is below the window I set the footer position to fixed. If the footer is not below the window I set the footer's position to relative. This allows the footer to always be at the bottom of the content or at the bottom of the window.
This dreaded problem.
What I currently have
html:
<html>
<body>
<div class="wrapper"></div>
<div class ="footer"></div>
</body>
</html
css:
* {
margin: 0;
}
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0;
}
.footer
height: 36px;
}
The problem is when i inspect the rendered page with chrome a few problems I see:
1. The html tag has a height associated with it hmmm and its not the entire page height
2. so I have div inside of the wrapper div that extends past the wrapper, body, and html tag?
My best guess is that if i can get the html to the page height I could style the footer to page bottom.
I was considering using javascript to grab the true height in pixels and passing that to height and ditching the percent. Only problem is I still want to know whats going on!
Thanks,
JT
add this css to your wrapper divs
wrapper_div{ overflow:hidden; }
this is a hack to recalculate floated elements inside an element. Otherwise the browser will forget about the floated elements, overflow-hidden does the trick or you can append a clear floated element to the bottom of the wrapper div like so
CSS
clear_float{
clear:both; display:block;
overflow:hidden; visibility:hidden;
width:0px; height:0px;
}
HTML
<div class="wrapperdiv">
/* other HTML elements*/
<div class="clear_float"></div>
</div>
this is assuming that the troublesome div is classed wrapperdiv
on second look this is completely invalid
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
}
you are setting the height twice in one declaration. height: auto !Important will take precedent over height: 100% so you need to decide whether you want your height automatically rendered over explicitly at 100%.
and your missing the opening block in this css declaration
.footer
height: 36px;
}
Just before the closing tag of the wrapper add a div with the class 'clear'
CSS:
.clear { clear: both; }
.footer { margin-top: -36px; }
The problem is that floated elements behave like absolute positioned elements.. They are not taken in account when calculating the height of the wrapper div.
In the end I just made the html body tags set via pixels and not percent. Nothing I tried above satisfied me.
If you want a facebook like fixed footer status bar. Try using the following css:
.footer {
width: 100%;
height: 25px;
position: fixed;
bottom: 0px;
I want a div element, in a bottom of window. like a div in bottom page of old facebook.com. or like a chat div of initial facebook.com
You can use position: fixed; bottom: 0px. But won't work in IE6.
<style type="text/css">
#footer { position: fixed; bottom: 0px; }
</style>
<div id="footer">I am at the bottom of the window</div>
Try using this. The bottom bar here is made with a div element. I would imagine you can use any element you wish, just reference the CSS class. I have only tested the div element
/* HTML */
<div class='always-at-bottom'>Always at bottom!</div>
/* CSS */
.always-at-bottom {
height:40px;
position: fixed;
left: 0;
bottom: 0%;
width: 100%;
background-color: blue;
}