I want my footer to be a sticky footer and tried following the css tricks negative margin trick, but did not work. I tried to impersonate my angular2 app in the below plunker code. I want the sticker not be fixed but sticky and go to the bottom when there are more content available in the main section. Note the footer is displayed above the data in the main section.
http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts
app.component:
<nav-bar></nav-bar>
<section class="main">
<div class="main-container">
Display my router-outlet here
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>
</div>
</section>
<footer-component></footer-component>
Any help to fix and move the footer down is appreciated.
You can still follow this example mentioned by
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Simply add this code to styles.scss
html,
body {
height: 100%;
}
In your app.component.scss
:host {
display: flex;
min-height: 100%; // used percent instead of vh due to safari bug.
flex-direction: column;
}
.Site-content {
flex: 1;
}
In your app.component.html
<header>...</header>
<main class="Site-content">..</main>
<footer>...</footer>
There are several ways to achieve this. I'm assuming you've tried one of these: CSS-tricks - Sticky footer, five ways.
For that to work, you would need to:
Remove absolute positioning of both the footer and the content.
Remove default top and bottom margins from body.
If you are not going with the flexbox or grid option, then place all content except for the footer inside of one element (so you can make sure the total height of that element plus the footer is at least the height of the viewport).
Here is an implementation of your Angular2 app with a sticky footer.
The sticky footer is achieved by wrapping all of the main content in a single div and using calc() to set it's minimum height to 100vh minus the footer's height.
I think it's not a good idea to make position:absolute for your .main block. Absolute positioning for your footer will be enough.
Try something like this
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
min-height: 100%;
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
}
Also remove margins and padding-top from .main block styles
You just have to edit 2 files:
index.html:
<!-- Full height body -->
<body class="pt-3 h-100">
<!-- Full height app container, and also use flexbox columns -->
<app-root class="d-flex flex-column h-100"></app-root>
</body>
app.component.html:
<router-outlet></router-outlet>
<!-- Footer top margin must be set on auto -->
<app-footer class="mt-auto"></app-footer>
Related
I've a sidebar which is positioned sticky but in some cases larger than the height of the screen.
If the sidebar is in fact larger as the screen height, I don't want it to stick on the top. It should scroll down with the content of the page.
I'm using Bootstraps sticky-top class for that.
It has the following attributes:
.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
}
I changed the top: 0 to top: 50px in my case because I need the space above.
Here's some example code: https://codepen.io/cray_code/pen/ZEaOXwo
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="toc sticky-top">
<nav class="list-group">
Links (see example)
</nav>
</div>
</div>
<div class="col-lg-9">
Content (see example)
</div>
</div>
</div>
I tried the solution from here and added the following code to my class:
.toc {
overflow-y: auto;
max-height: 100vh;
}
But that doesn't help.
Is there a pure CSS solution for that or do I need to use JavaScript?
Not sure if this is what you want, but maybe using the calc() in your css could help you.
.toc{
overflow-y: auto;
max-height: calc(100vh - 50px);
}
Hope this pen helps
Some explanations:
in js we use .offsetHeight&.clientHeight to get height we check weather this height(493px) + 50px offset is more than screen height or not.
When screen size is small we set position to static
Also we set margin-top: 50px instead of top: 50px
because top works only for sticky and margin-top works for static
For aside blocks that higher then window height you can use smartSticky script
Just add "data-smartsticky" atribute to your aside block
https://www.npmjs.com/package/smartsticker
Parent block of sticky block must be height 100%, or for flex - flex-grow:1
I am making a small Sinatra app and using bootstrap for layout. But it is giving some issues.
It is not sticking at the bottom and also not showing 100% width as I have programmed. Also, the text of the footer is not getting centralized after even trying the text-center class.
Below is my HTML for the footer.
<div class="container-fluid">
<footer id="footer">
<p class="mx-auto">© 2017 <strong>Coding Tips</strong></p>
</footer>
</div>
Please also see below my CSS for the footer.
#footer {
background-color: white;
color: #111111;
position: relative;
z-index: 1
bottom: 0;
left: 0;
width: 100%;
/*height: 20px;*/
align-content: center;
}
Any suggestion to solve this problem?
There's a much easier way to create a sticky Bootstrap footer that doesn't require you to write any styles yourself. The Bootstrap navigation bar component comes with the .navbar-fixed-bottom class, alowing you to fix a navbar to the bottom of the screen. For an example,
p {
text-align: center;
padding: 10px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<p>© 2017 <strong>Coding Tips</strong></p>
</div>
</nav>
With this, you can get a fixed-to-bottom navigation bar that acts as a footer using pure Bootstrap.
Edit - Creating a sticky footer that expands with the page.
The previous example demonstrates how to create a footer that is fixed to the bottom of the viewport, superimposed over the page content. If you're looking for a footer that will only be fixed to the bottom of the screen when content is sparse, we can use flexible boxes.
body {
margin: 0; /* To ensure the footer takes up the full width of the viewport */
}
.container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
footer {
text-align: center;
}
<div class="container">
<div class="content">
Your content goes here.
</div>
<footer>
<p>© 2017 <strong>Coding Tips</strong></p>
</footer>
</div>
The .content class automatically takes up the available space, forcing the footer to the bottom of the screen. Since we set the minimum height of .container to 100vh, it'll take up at least the entire height of the screen. Once more space is needed, the footer get's pushed down further. Flexbox provides what's probably the easiest and cleanest method of achieving this effect.
Bootstrap navbars: Components - Bootstrap
Solved by Flexbox: Sticky Footer - Solved by Flexbox - Cleaner, hack-free CSS
to align text in center please use
text-align: center;
the width is 100% as needed and
to place footer at the bottom you can give
top: 400px;
please check the given link https://jsfiddle.net/komal10041992/xn8mmg44/3/
I want to fix my footer at the bottom gap. I think content is less then this problem repeated and content full problem solved but I want to content less does not shows gap I'm using same footer remaining pages so help me any one.
If content is less, why not simply fix it at the bottom. I mean its the dirtiest hack possible.
If you want something clean, look into sticky footer.
$(function(){
function adjust(){
var winH = $(window).height(),
docH = $('document').height();
if(docH > winH){
//leave it
}else{
$('.footer').addClass('fix-footer');
}
}
$(window).on('resize',adjust);
})
.fix-footer{position:fixed; bottom:0; left:0; width:100%;}
The simplest way to do this is by using Flexbox. The flex property specifies how much the item will grow to fill up the remaining space.
The container needs to be set to display: flex, and we set min-height: 100vh for the body so that it fills up at least 100% of the viewport height.
CSS
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
HTML
<body>
<main>Main content goes here</main>
<footer>Footer goes here</footer>
</body>
Use .main class as a container put all your body data in main container
<html>
<head>
<style>
body {
margin:0;
display: flex;
height: 100vh;
flex-direction: column;
display:-ms-flexbox;
}
.main {
flex: 1;
}
</style>
</head>
<body>
<div class="main">Put you form here</div>
<div class="footer">Footer goes here</div>
</body>
</html>
<div class="footer"></div>
css
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
}
Position-absolute:
This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location.
Position-fixed:
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled,
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.
Can anyone help me with position my content block?
It looks good if there are a lot of content, but not when window higher than content block.
Actualy I need that "content" block on my picture teked all free space (height) and thats why footer stick to the bottom.
I have next HTML markup:
<div>
<header></header>
<nav class="breadcrumbing"></nav>
<section class="left_nav"></section>
<section class="content"></section>
<footer></footer>
</div>
With this CSS:
html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
body>div>header{height:50px;background-color:#9dc155}
body>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
body>div>section.content{width:168px;float:left;}
body>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}
I allready tried answers from Is it possible to get a div's height to be 100% of an available area? and some same questions but with no luck.
ALso my live HTML has backgroun-images, so I can't just put footer to the bottom with position:absolute.
There I post my HTML to preview: jsfiddle.
UPD: scaled live preview:
You will have to set the html and body height property to 100%; then you can set the footer height to 100%; this will tell the main container elements the real meaning of 100% and it will work.
Your updated fiddle
Basically, these are the rules you have to add:
html, body {
height: 100%;
}
footer {
height: 100%;
}
Update
Ok, I might have misunderstood your requirements, here is a cleaner example:
Working example
Basically, what you additionally do in this example is having your wrapper element display:table with an height: 100%, then you make your footer display as table-row.
Important note: This solution uses display-table which is compatible only for IE8+. If supporting IE7 is an issue for you, then you have two solutions that I can think of out of my head:
Either you use a fixed-width footer, push it below the content and then pull it back with a combination of negative margin and padding.
Or you fallback to support of older browser by putting your footer in position using some javascript.
This the breakdown of the code:
HTML
<div class="wrapper">
<header></header>
<section class="main-content">
{child elements of your main-content area}
</section>
<footer></footer>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
margin: 0 auto;
height: 100%;
}
.main-content {
display: table-row;
height: 100%;
}
footer {
display: table-row;
}
Here's an updated fiddle
The crux of this is setting the body to be absolutely positioned to the viewport. From there, if you wanted to allow it to scroll as you normally would, then you would change the footer's position to fixed and the content div's CSS to this:
body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0; overflow-y:auto;}
I've wrapped your content div in another to allow for the automatic margins to center your page, and then defined the footer's box sizing as border-box to account for the padding you're adding to it as well.