I would like to have a footer element that is inline only if the content is overflowing the viewport, in which case it becomes sticky, bottom fixed. The use case would be to have some functional button always visible on long data grids.
I remember doing this with a hack many years ago but I forgot :) I know it could be done with Javascript but is there a more streamlined way to do it only with CSS?
When content is shorter than the viewport
------< viewport top
header
content
[footer, inline]
------ < viewport bottom
When content overflows the viewport
------< viewport top
header
content
content
content
[footer, sticky]
------ < viewport bottom
content
content
content
How about using max-height and calc? Header and footer need to have a fixed width:
http://codepen.io/jlowcs/pen/OPBGjx
HTML:
<div class="header"></div>
<div class="content">
content<br>
[...]
content<br>
</div>
<div class="footer"></div>
CSS:
html, body {
margin: 0;
height: 100%;
}
.header {
height: 150px;
background-color: blue;
}
.footer {
height: 100px;
background-color: green;
}
.content {
max-height: calc(100% - 150px - 100px);
overflow: auto;
}
Related
I am very new to HTML, CSS and angular.
I am trying to create an angular app and where I have three main div on the screen
1. header
2. content
3. footer
The idea is page should be fixed and cannot be scroll.
Header and footer always stick to top and bottom.
the middle part is content which is scroll-able only.
contents should not be overlapped by header and footer.
Layout should work with different type of devices and screen.
Here is the fiddle for the same but it is overlapping conents.
JS Fiddle
I achieve it with fixed size of screen but not with different size.
here is my another code...
html {
height: 100%;
overflow: hidden;
}
body {
min-height: 100%;
}
<body>
<app-root class="h-100 w-100 align-items-center"></app-root>
</body>
.headerdiv {
margin-top: 0px;
height: 60px;
min-height: 60px;
}
.contentdiv {
position: relative;
overflow: scroll;
min-height: 91%;
}
.footerdiv {
position: relative;
overflow: hidden;
margin-bottom: 0px;
padding-bottom: 0px;
height: 20px;
min-height: 20px;
width: 100%;
background-color: darkblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="headerdiv">
<app-hsbc-header-bar></app-hsbc-header-bar>
</div>
<div class="contentdiv">
<div>
<router-outlet></router-outlet>
</div>
</div>
<footer class="footerdiv">
<app-application-footer></app-application-footer>
</footer>
Can anyone help me with this.
What you need in the main content div is to give it the dynamic height using pattern like this:
height : calc( 100vh - (headerHeight + footerHeight))
So it height scale with the view height of the browser, and give it overlow-y:auto then when the content exceed it height it become srollable :
nav{
height:20vh;
/*Or fixed pixel unit*/
background-color: green;
}
footer{
height:20vh;
/*Or fixed pixel unit*/
background-color: black;
}
section {
height: calc(80vh);
/* - Height: calc(100vh - (navheight + footer))
- Over flow y make the dive scrollable
when it exceed the fixed height*/
overflow-y: auto;
transition: all 0.5s;
background-color: yellow;
}
<nav></nav>
<section>
Main content will be scrollable if it contain exceed the fixed height
</section>
<footer></footer>
You may also like to try Bootstrap Navbar. It provides all required css styles.
I'm trying to make the footer of my HTML to appear on every printed page without the body content overlapping the footer.
What I have is basically this:
<style>
footer {
position: fixed;
bottom: 5pt;
height: 100pt;
}
</style>
<div>
content...
</div>
<footer>
footer
</footer>
But when the body content is too large, it overlaps with the footer and I can't find a way around it.
I tried #page { margin-bottom: 100pt; }, but it pushes the footer up too, padding didn't work, position: running did nothing (I couldn't find whether any browser supports it).
The requisites to solve this are:
the footer needs to appear on every page on print;
the footer content can't overlap with the rest of the page;
footer {
position: fixed;
bottom: 5pt;
height: 100pt;
z-index:1000;
}
<html>
<head>
<title> Page Title </title>
</head>
<body>
<div>
content...
</div>
<footer>
footer
</footer>
</body>
</html>
Use z-index to your <footer> so that your body part won't overlap your footer.
Hope this helps.
You can use the CSS calc() function to calculate the appropriate height for the body by subtracting footer height from window height. With this approach, the two elements won't overlap, their positions can remain relative, and the height is automatically recalculated when resizing the window so your footer will always stay at the bottom.
.content {
overflow: auto;
height: calc(100vh - 50px); /* window height - footer height */
padding: 0 20px;
background-color: gray;
}
.block {
height: 100px;
margin-bottom: 20px;
background-color: white;
}
footer {
height: 50px;
width: 100%;
background-color: green;
}
<div class='content'>
<span>body</span>
<div class='block'></div>
<div class='block'></div>
<div class='block'></div>
</div>
<footer>
<span>footer</span>
</footer>
I have a layout where the footer is a sibling of the header and content, but the footer is dropping below the window height rather than "sticking" correctly at the bottom.
HTML
<div class="header">Header</div>
<div class="content">
Content
<div class="push"></div>
</div>
<div class="footer">Footer</div>
CSS
html, body {
height: 100%
}
.header, .footer, .push {
height: 75px;
}
.content {
margin-bottom: -75px;
min-height: 100%;
}
I've been looking over different options for sticky footer, and none seem to cover when the header and content are sibling elements with the footer. I'm working with a legacy layout, so I don't have the option of creating a wrapper container for the header and content. How can I get the footer to stay at the bottom without dropping below the window?
Since your header and footer are static heights you can do this:
min-height: calc(100% - 75px - 75px);
I keep them separate (the 75px), so that I know one is for footer and one is for header. And its easier to change in the future if one of the static heights changes.
Also, you will probably want to remove the margin from your body to get it to fit correctly and remove the negative margin you have on the footer.
html, body {
height: 100%;
margin: 0;
}
.header, .footer, .push {
height: 75px;
}
.content {
min-height: calc(100% - 75px - 75px);
}
<div class="header">Header</div>
<div class="content">
Content
<div class="push"></div>
</div>
<div class="footer">Footer</div>
Here is a fiddle of this solution.
add footer css with a separate class
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
How do I make a footer (footer-tag) stick to the bottom of the screen, but not be sticky to the screen? If I'm on a 1080p monitor, the website has no scroll. When I try on 1366x768 the website becomes scrollable. I want the footer to be 100px below the content, because right now the footer is on top of the content. Here's my HTML structure:
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<footer></footer>
</div>
</body>
So I have a header, body, and footer inside a container. All the guides/tutorials I've seen, makes the footer stick to the screen. If it doesn't stick to the screen, it won't stick to the bottom. Whenever I open the Chrome Developer Tools bar/menu, the footer shoots back up, which I guess is because my body's height is 100%? But I'm not sure. Help appreciated! Thanks.
Quite easy: make html and body 100% height, your container (anything that has to be in the initial viewport) as well. Position the container relatively, the footer absolute, and put anything below.
Example on JSFiddle
Code
<style type="text/css">
html, body { height: 100%; }
#container { position: relative;
/* updated to support footer push */
min-height: 100%;
padding-bottom: 60px; /* must be the same as footer height */
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#below { height: 500px; } /* or no height, or whatever */
footer { position: absolute; bottom: 0; height: 60px; width: 100%; } /* as it's absolute, you should give it a specific height, or let it be as wide as its content */
</style>
<div id="container">
<footer>F-F-F-F-F-FOOTER!</footer>
</div>
<div id="below"></div>
Edit see the edited code above; min-height instead of height for the container to let it be able to stretch, but at least be as high as the screen. You'll have to add a bottom padding too, as high as the footer, to prevent the footer from overlapping your content. And also add box-sizing: border-box, otherwise the padding will add up to the height, resulting in the footer to be pushed down the initial viewport.
(For history's sake, here is the original fiddle)
footer { position : absolute; bottom : 0px; }
position : fixed ( When you want to stick any html element on screen and that will not move during scrolling )
position : absolute ( When it will show, it will be on the position that you specified, but later screen size and scrolling can change it's position )
Thanks ( Sorry for weak english )
:)
you could add some padding to the bottom of your page, and then use vh measurements:
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#header{
height:10vh;
}
#container {
background: red;
position:relative;
}
#body {
height: 70vh;
background: gray;
padding-bottom:20vh;
}
footer {
position: absolute;
bottom: 0;
height: 20vh;
width: 100%;
background: blue;
}
<body>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<footer>footer</footer>
</div>
</body>
Trying to make the footer stick to the bottom and the content become automatically centered in between the header and footer.
Currently using this technique: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
But my footer appears way below and creates a huge gap in between.
Website: Stingrayimages.ca
Edit: So i managed to get the footer to stick to the bottom. However, the footer is not at the bottom of the page, it leaves a little bit of a scroll. And when shrink the window, the footer doesnt stop where the content.
Also i cant get the content div to stay in the middle without messing everything up.
Your container div should wrap your Head div. I think you mistook Ryan's head area for what designers commonly refer to as the header of the page, when in fact in the example it's the head element of the html. The extra space on the bottom is likely equal to the height of your head div.
In the sticky footer, remember, the container wraps all body content but the footer.
If you are using the same technique as the link, you are missing position at the footer.
And still, with the example you linked, see the structure:
<style type="text/css">
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
</style>
<div class="wrapper">
<div class="header"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
But i would rather go with something like this:
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div#container {
position: relative;
margin: 0 auto;
height: auto !important;
height: 100%; /* IE6: min-height*/
min-height: 100%;
}
div#header {
}
div#content {
padding: 1em 1em 5em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0;
}
</style>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>