I am having issues to fix the header. I already manage to make the footer sticky and responsive, now I want the header to be fixed and responsive for different screen size.
This is what I tried so far:
Live Demo http://jsbin.com/vevay/1/edit?html,css,output
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Sticky Footer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
</html>
CSS code
html {
height: 100%;
}
.container {
display: table;
height: 100%;
}
.block {
display: table-row;
height: 1px;
}
.push {
height: auto;
}
.container {
width: 100%;
margin: 0 auto;
}
.block:nth-child(odd) {
}
.header_block{
background: grey;
}
.body_block{
background: lightblue;
}
.footer_block{
background: green;
}
update:
I did some researcher before posting this question, their are this one but the footer is not responsive, that's why I posted this question.
EDIT
I've come up with another solution : http://jsbin.com/gevafi/2/edit but I still have a margin left at the bottom of the footer.
EDIT 2
Temporary solution: http://jsbin.com/vokiqi/1/edit?html,css,output
Decided to have mercy on you and create one from scratch for you: http://jsfiddle.net/yo2ukrua/3/
Instead of using tables, I removed all of it and kept them as blocks. For your setup, you didn't really need any tables and I'm guessing you only used it so that you could make your footer stick to the bottom.
Once they're back to blocks, you can just give the footer and header a fixed position, set the footer to bottom and header to top.
Then apply a top and bottom margin to the body and the margin should be the height of the footer and header.
CSS:
.header_block {
background: grey;
position: fixed;
width: 100%;
top: 0px;
}
.body_block {
background: lightblue;
margin-bottom: 18px; /* height of your footer */
margin-top: 18px; /* height of your header */
}
.footer_block {
background: green;
bottom: 0px;
position: fixed;
width: 100%;
}
HTML:
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content<br>Body Content<br>Body Content <br>Body Content <br>Body Content<br>Body Content<br>Body Content<br>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
Alternatively, you can have a better footer
http://jsfiddle.net/yo2ukrua/15/
It uses a div (push) that has a minimum height of the window size but if the window size is smaller than the content (creating a scroll) it then uses the height of the content itself, thus always pushing the footer to the bottom. The footer also retains a position of relative.
Related
Not really sure why the sticky footer isn't working in Bootstrap 4. I have a TYPO3 website which I am a beginner at.
The sticky footer is not sticking at the bottom of the page.
Here is a copy of the page source as it has been rendered.
I basically copied the html file from bootstraps docs folder and then modified it and copied it into my TYPO3 template.
If I fill the page with content, the footer does not stick - I have to scroll the page down to see it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css"
href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
media="all">
<script
src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="mt-1">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the
viewport in desktop browsers with this custom HTML and CSS.</p>
<p>
Use <a href="../sticky-footer-navbar">the sticky footer with a
fixed navbar</a> if need be, too.
</p>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>
Update 2020 - Bootstrap 4.5+
Now that Bootstrap 4 is flexbox, it's easier to use flexbox for the sticky footer.
<div class="d-flex flex-column min-vh-100">
<nav>
</nav>
<main class="flex-fill">
</main>
<footer>
</footer>
</div>
Bootstrap 4.0 Sticky Footer (4.0.0)
Simple Footer at Bottom Example (4.5.0)
Note: The flex-fill utility was included in Bootstrap 4.1 at later release. So after that release the extra CSS for flex-fill won't be needed. Additionally min-vh-100 is included in newer Bootstrap 4 releases.
Also see: Bootstrap 4 - Sticky footer - Dynamic footer height
Managed to figure it out. Maybe I have a misunderstanding on what "Sticky" is or something, but the solution was to change absolute -> fixed in the css file.
e.g. from:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
to:
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
The example in the Bootstrap 4 docs has the following CSS:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
You've probably forgotten to set html { position: relative; min-height: 100%; } - I know I usually forget that part.
In Bootstrap 4, use the fixed-bottom class to stick your footer. No custom CSS needed:
<footer class="footer fixed-bottom">
...
</footer>
<html class="h-100">
.
.
</html>
This should solve the problem. It is similar to Benjineer's answer but ready bootstrap class.
Tested with Bootstrap 4.3.1
if you use
<footer class="footer fixed-bottom">
...
</footer>
remember to add
html {
padding-bottom: >= footer height;
}
to the CSS
to avoid blocking some content at the bottom of your page
i would like to print footer on every page that I have.
Text content in div above the footer is dynamic, so I don't know what size it will have. My footer has fixed position, so it will repeat on every page. My problem is that content is overflowing the footer.
#media print {
#page {
size: A4;
margin: 2cm;
}
body {
position: relative;
}
html,
body {
margin: 0cm !important;
width: 210mm;
height: 100%;
}
footer {
display: inline-block;
position: fixed;
vertical-align: bottom;
width: 100%;
bottom: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Sample text</title>
</head>
<body>
<div>... very very long text over 10 pages or so ...</div>
<!-- footer which must be on every page -->
<footer class="big-footer">
<img src="/images/country/cs/logo-pdf.png" class="footer-logo">
<div class="footer-text__block">
<span>Osobní výživový plán dle metabolické diagnostiky KNT</span>
<br>
<span>pro klienta: <strong>Michal Lokšík</strong></span>
<br><br>
<span class="site">http://www.svet-zdravi.cz</span>
</div>
</footer>
</body>
</html>
screenshot here
Elements with CSS property position set to fixed will “stick” to the edges of the page by setting top or bottom to 0. They will also repeat on each printed page.
I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.
The relevant HTML (as a Jade template) is as follows:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch.
The corresponding CSS is as follows:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height.
Thanks for any insights that you can provide.
EDIT:
The generated HTML as requested:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right">customer login</div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or home</div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right">TermsPrivacyCorporate</div>
</div>
</div>
</div>
</body>
One solution that works in all modern browsers is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/
You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements.
If this solution doesn't work, another option is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
This is a "hidden margin" trick that also works in all modern browsers. Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/
I'm having trouble positioning my vertical navigation bar to the left of my content Div. Here is what I have and what I want:
The problem, is that it's a fixed position so it's different for monitors that are not a similar size. So I'm guessing I'll need to have relative positioning but I'm not too sure on how to do it.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href= "styles/styling.css" />
</head>
<div class="container">
<ul class="nav">.....(Just nav bar stuff)
<div class="content">
<h1>abcd</h1>
<p>abcd</p>
</div>
CSS
.content {
background-color: #FFFFFF;
width: 650px;
padding: 20px;
margin: auto;
word-wrap: break-word
}
.container {
position: fixed;
top: 151px;
left: 420px;
}
Thanks!
Fixed position will help you keep your menu visible when you scroll down. Otherwise, you should not use it.
<div class="container">
<div class="one-third column">
<ul class="yourmenu">xxx</ul>
<div class="filler"></div>
</div>
<div class="two-thirds column">
Your page content here
</div>
</div>
<style>
.container {width:960px;margin:auto;}
.column {float:left;position:relative;}
.one-third {width:320px;}
.two-thirds {width:640px;}
.filler {width:100%;height:10px;}
.yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>
Use percent (%) instead of pixels (px).
My goal is to have a footer that stays at the bottom of the page if there is little content, and moves to the bottom of all content if the page has a lot of content (requiring a scroll down).
I read this post Flushing footer to bottom of the page, twitter bootstrap , tried the layout and css, but still can't seem to get my page to work correctly.
This is my code layout - maybe I just made a slight mistake?
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
// Header Stuff
</div>
<div class="container">
<div class="jumbotron">
// h2
</div> // end jumbotron
<div class="row">
//ALL OF THE INFORMATIONAL CONTENT
</div> //end row
</div> //end container
<footer class="footer">
//INFORMATION / LINKS
</footer> //end footer
</body>
and with the name changes to the CSS code...
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
.row {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
I think, css flexbox can help you in this. But, just beware of browser support.
HTML:
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
CSS:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
demo: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Click on Toggle Content Button right there to see the difference.
try this one...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>