As far as I can tell this isn't a duplicate question because it's a bit different than the other questions on this topic.
I'm using Google's Material Design Lite and the footer will not stay at the bottom of the page properly.
I've seen the different fixes using this trick
<div class="content">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
and I've tried using this method
#footer {
bottom: 0;
width: 100%;
position: absolute; (or fixed)
}
The first option doesn't work because Material Design Lite actually uses the footer tag. And to be honest I don't really want to do that anyway because it seems kind of sloppy to me.
The CSS method for the footer almost works but there are a few problems. When using position: absolute; it doesn't always keep the footer on the bottom of the page and it will sometimes cover content. When I try fixed the footer is always kept at the bottom of the page but when there is enough content for the page to scroll it stays at the bottom of the screen and covers content. Both fixed and absolute will keep the footer at the bottom of the screen not the page, which means that when there is enough content to scroll the footer covers content at the edge of the screen.
The behavior for fixed can be reproduced 100% of the time, but for absolute I haven't figured out what causes it to work sometimes and not others.
This is the code I have for the footer
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
<span class="visuallyhidden">Twitter</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
<span class="visuallyhidden">Facebook</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
<span class="visuallyhidden">Google Plus</span>
</button>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn social-btn__share">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
</div>
</footer>`
Has anyone else had this issue or have any ideas on a solution?
Edit to add more information:
The issue isn't with the height of the body or html they are both at 100%.
Full Layout Code
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- View Content Here -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
<div class="mdl-layout__obfuscator"></div>
</div>
</body>
I managed to do that by:
1. Without waterfall header
Moving the footer element outside the main element
Set the style of the .mdl-layout__content element to"flex: 1 0 auto"
Example:
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
...
</header>
<main class="mdl-layout__content" style="flex: 1 0 auto;">
...
</main>
<footer class="mdl-mega-footer">
...
</footer>
</div>
</body>
2. With waterfall header
Just by moving the footer element outside the main element
Example:
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- Main Content -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
</div>
</body>
Tests:
Short content: http://codepen.io/kabudahab/pen/vGdVQM
Long content: http://codepen.io/kabudahab/pen/JXpmpv
I was having the same problem, where a mdl-mini-footer was overlapping with my mdl-layout__content.
My solution was to keep the tags separate, i.e.
<main class="mdl-layout__content">
...
</main>
<footer class="mdl-mini-footer">
...
</footer>
and modify the classes as follows (taking inspiration from #K.A.D's first solution above)
.mdl-layout__content {
flex: 1 0 auto;
}
.mdl-mini-footer {
flex: 0 0 auto;
}
The modification of the footer class was necessary to stop the footer growing into spaces I didn't want it to (the first 0 in 0 0 auto).
Try This
<main class="mdl-layout__content">
<div class="page-content">
</div>
<div class="mdl-layout-spacer"></div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</main>
Just Add:
<div class="mdl-layout-spacer"></div>
After:
<div class="page-content"></div>
I faced the same issue as you. After browsing through many tutorials and 2 questions like this, I had a peek at one of the templates provided by MDL and noticed that the footer is included within the main section. I find it higly counter-intuitive but the footer element should be specified just before the closing tag, NOT after it.
See the screenshot of the markup which is now working fine. I'm working on the website of TEDx GEC.Visit the tedx GEC website to see the footer in action.(changes will be uploaded by 20-07-2016, anyone visiting before that will notice that the footer overlaps the content. Here's the screenshot:Notice the closing main tag is after the footer.
Related
I need to make a inner div horizontally scrolleable, but using the browser scrollbar and not that particular div's scrollbar.
One option would be making every other div's position as static and overflowing the wrapper div, but since I'm modiyfing a premade template, I would prefer to be able to do this without changing the layout. In that sense, a JavaScript/jQuery plugin would be nice, but totally not a must.
Here is the code:
<title>This is a test</title>
<body>
<header>
This is the header.
</header>
<div id="wrapper">
<div id="left-sidebar">
This is the left sidebar.
</div>
<div id="test">
<div id="content">
This is the main content.
<div id="flex">
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
</div>
</div>
</div>
</div>
<footer>
This is the footer.
</footer>
</body>
Here is the jsFiddle: https://jsfiddle.net/k6e3sv6v/
Thanks bra
I think you cannot focus BROWSER scrollbar into some div it appears if the whole page is wider than 100% width.
But I think it can be done by putting all other elements around that div as fixed position which won't move over the screen even if the scroll was moved left-right...
I would like to re-create this revealing sticky-footer effect found at http://www.akc.org/dog-breeds/
I know the footer has to be fixed.
I know the content needs to have a higher z-index
I'm guessing (sort of) that the body needs to have a margin-bottom which is equal to the height of the footer???
Please would someone help me out.
I'm using Twitter Bootstrap 4. The general markup looks like this:
<body>
<div class="container"> <!-- This part should scroll up to reveal the footer below -->
<!-- Content goes in here -->
</div>
<footer class="footer"> <!-- This should be hidden initially -->
<div class="container">
<div class="row">
<!-- Footer stuff goes in here -->
</div>
</div>
</footer>
</body>
You will want to add a main content div and then give this div a background color of whatever you want your page to be otherwise you will just end up having text overlapping but yes you are right you will want to give your main content div a z-index of 1 or something and then fix your footer behind that and give it a z-index smaller than that in my example I gave it a z-index of -1. Then your main content div will scroll over the top of your footer. You will probably want to give your footer a height and your body a padding-bottom of the same height.
Here is an example of how I did it Fiddle Demo:
Html:
<div class="main-content">
<div class="container">
<div class="row">
Your main Content Scroll down
</div>
</div>
</div>
<footer>
<div Class="container">
<div CLass="row">
Footer Content
</div>
</div>
</footer>
Css:
body{
padding-bottom:200px;
}
.main-content{
min-height:200vh;
background:#fff;
z-index:1;
}
footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
background:#000;
color:#fff;
z-index:-1;
}
I have a header and footer plus a listview in the main html5 body but the issue that I am having is that when the listView is large, it scrolls the whole page including the header.
what I am trying to achieve is to just make the listview scrollable and nothing else so that the header and footer is always visible.
Is this possible in html5/jquery?
edit:
Here is what I have tried.
<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
<div data-role="page" id="page">
<div data-role="header" data-position="fixed">
Back
<h1>Claim Items</h1>
</div>
<div data-role="content">
<h3 style="margin-left:1em">The Demo Title</h3>
<ul data-role="listview" id="itemList" data-inset="true" data-scroll="true">
<li>1: demo</li>
<li>2: demo</li>
<li>3: demo</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<div data-role="navbar">
<ul>
<li>Add an Item</li>
<li> Remove an Item</li>
<li>Add comment</li>
</ul>
</div>
</div>
</div>
</body>
I think that you are asking for a fixed toolbar:
In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.
To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.
Fixed header markup example:
<div data-role="header" data-position="fixed">
<h1>Fixed Header!</h1>
</div>
Fixed footer markup example:
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
Working demo here.
<div data-role="header" data-position="fixed" data-id="header1" data-tap-toggle="false" style="border-bottom:4px solid #f57122;">
<h1>Header</h1>
</div>
In my experience you need also to set data-tap-toggle to false, because you dont want the header to disappear if they click anywhere on the page. Also you need this data-id, if you have multiple pages you need the header on each page to have the same data-id so the jquery mobile will not replace current header of the active page.
EDIT:
If you experience blinking during page transitions on the actual device you have to add this to your index html also
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I feel like I am not writing this correctly and this is my first layout in this nature.
I have a site that has several backgrounds that go across the whole screen. The inner containers are 960 pixels and then centered.
The only problem is every section with a different background needs its own outer and inner div.
Dabblet
http://dabblet.com/gist/2920465
Foo
<section class="hero">
<div class="hero-container">
Hero content
</div>
</section>
<section class="popular">
<div class="popular-container">
Header content
</div>
</section>
<div class="main">
<div class="main-container">
Main content
</div>
</div>
<footer>
<div class="footer-container">
Footer content
</div>
</footer>
So far the code looks ok. It's too simple to go wrong. Only thing for now i would change is the 5 classes
.header-container,
.hero-container,
.popular-container,
.main-container,
.footer-container
merge into one class inner-section-container and apply this class to the corresponding elemnts instead, as for now you do for all this classes the same thing.
The general html structure of my pages is
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
I have a 1000px layout with the content centering.
However, for a couple of the pages I have a banner in the content that should expand 100% to the sides of the browser (i.e., beyond the 1000px wrapper).
Should I delete the wrapper div for this page and apply width: 1000px; margin: 0 auto; separately? Or should I take the banner outside of the standard wrapper layout? What is a more standard way to do this?
Thank you.
Using style="overflow:show" for that content banners parent should allow it to show. Instead of width=100% you might need to use some javascript to get the screens width and make it that width.
I would take the banner outside of the wrapper.
I had same problem and done something like this:
.center
{
margin: auto;
width: 1000px;
}
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div class="center">
</div>
<div id="banner">
</div>
<div class="center">
</div>
</div>
<div id="footer">
</div>
</div>