I'm trying to replicate the static footer as shown here in a polymer core-header-panel.
So far I have a core-header-panel consisting of a footer and main content area with the 'fit' attribute so it stretches to the height of the viewport.
<body fullbleed layout vertical>
<core-header-panel flex style="background-color: red;">
<core-toolbar id="mainheader">
Header
</core-toolbar>
<div fit layout vertical>
<div flex style="background-color: yellow;">
...
</div>
<footer style="background-color: green;">
FOOTER
</footer>
</div>
</core-header-panel>
</body>
However, I have two issues:
The footer is always visible, the header panel only scrolls on the 'yellow' div in the main content area.
When I minimize the window the footer overlays the 'yellow' div in the main content area (shown below)
How can I resolve these issues?
Update
Other implementations have been suggested from the polymer team which get closer to the solution: Erics solution, Robs solution, however neither of them solve issue 1, in the code the footer is outside the core-header-panel and therefore is always visible even when the container above the footer is larger than the viewport.
Moving the footer to within the header panel main content area and flexing the content above it doesn't work either.
http://jsbin.com/vopahu/1/edit?html,output
You can use CSS's calc function to calculate the min-height for your content, if you're willing to set a fixed height on your footer.
<style>
core-header-panel {
background: red;
}
#content {
background: yellow;
min-height: calc(100% - 32px /*core-toolbar*/ - 32px /*footer*/);
}
footer {
background: green;
height: 32px;
}
</style>
<core-header-panel>
<core-toolbar>
Header
</core-toolbar>
<div id='content'>
...
</div>
<footer>
FOOTER
</footer>
</core-header-panel>
http://jsbin.com/boyiwumigo/1/edit
Related
What I'm trying to build:
Essentially, a collection of vertically and horizontally divs that have content, using flexbox - pretty straightforward.
My issue:
When I start adding content - and the content starts exceeding the window, I can't seem to reach it: I can't scroll up or down to look at overflown content.
My build:
This is what my body looks like,
<body>
<div id="flex-container">
<div class="content">
<!-- content and other stuff -->
</div>
<div class="content">
<!-- content and other stuff -->
</div>
</div>
<body>
And this is what my style.css looks like,
#flex-container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100%;
}
.content{
width:75%;
}
I have tried setting overflow properties to no avail. If I don't add the height:100%; the content doesn't get centered vertically.
Thank you in advance!
You can add overflow: auto; to the div, this will add a scroll bar to see the extra overflown content
My question is almost exactly like this one : CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page The main difference being that I could not get any of these answers to work in my case
What I am trying to achieve :
if the page does not posses enough content for a scroll, the footer is displayed at the bottom of the page
if the page posses enough content to scroll, the footer is displayed at the bottom of the content ( does not stick to the bottom of the screen )
The main issue here is that I have a lot of extra div in the hierarchy and I struggle to understand how to apply the given solution on them.
The best I could achieve was either to get the div at the bottom of the content regardless of it's length or to overlap the header.
My code looks like this :
( index.html ):
<html>
<head>
<!-- ... -->
</head>
<body>
<app-root></app-root>
</body>
</html>
( app.component.html )
<div id="body-container">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
( footer.html )
<div id="footer">
<p>footer works!</p>
</div>
Move your footer component out of body-container and apply the following style:
index.html
<body>
<div id="body-container">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</body>
Your css file
html, body {
height: 100%;
margin: 0;
}
#body-container {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
#footer {
height: 50px;
}
Tips: It's a good practice use the footer tag to footer of the page, header tag to header the page. Like this:
<header>The header page </header>
<main>Your content</main>
<footer>The footer page </footer>
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;
}
Why is it that the top half of my website (header-wrapper and menu-wrapper) is responsive, but the bottom (featured-wrapper and footer) isn't?
Recently, I've noticed that this responsive website behaves strangely when the screen is smaller than about 1000px. The header and navigation menu shrink to fit the screen size, but the content wrapper, called #featured-wrapper, and footer don't. The content is cut off, and where they cut off they are replaced with a dark charcoal colored bar that is the same as the footer color. When the website is viewed in a larger browser it centers perfectly.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<h1></h1>
<br>
<h2></h2>
</div>
</div>
<div id="menu-wrapper">
<div id="menu">
<ul>
<li>
<!-- content -->
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="featured-wrapper">
<div class="extra2 container">
<div class="ebox1">
</div>
<div class="title">
<!-- content -->
</div>
</div>
</div>
</div>
<footer>
<div id="copyright" class="container">
<p></p>
</div>
</footer>
</body>
</html>
CSS for #featured-wrapper is:
#featured-wrapper
{
overflow: hidden;
padding: 10em 0em;
background: #FFF;
text-align: center;
}
Your css specifies
.container {
width: 1200px;
...
}
which is used in both the footer and the main content. One possible fix to this is to change it to
.container {
max-width: 1200px;
...
}
so that it will stretch to the width of its parent but will never go larger than 1200px wide.
This occurs because of this css:
overflow: hidden;
This prevents the #featured-wrapper element to show the slide bars:
CSS overflow Property
The overflow property specifies what happens if content overflows an element's box.
hidden The overflow is clipped, and the rest of the content will be invisible
I'm using Foundation's off-canvas navigation, attempting to make a navigation that takes up the full height of the device.
By default, the height of the menu options are determined by the height of the content being shown. This means if your content is less than the height of the menu items, your menu items will be invisible.
I would like both the menu, and the height of the content section to be fixed at the height of the device. With only scrolling in the content section if needed.
Setting the height, and min-height of content area to 100% doesn't seem to have any effect - only using a fixed height e.g. 500px will change the height - but then this isn't scalable.
How is this achieved?
If I give '.inner-wrap' a fixed height, the whole thing will adjust. How can I make sure .inner-wrap takes the full height of a device?
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Label</label></li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</aside>
<section class="main-section">
<div class="section-inner">
<p>blah blah</p>
<p>test</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
Try if this works, first enclose the <div class="off-canvas-wrap"> in another div
<div class="page">
<div class="off-canvas-wrap">
<div class="inner-wrap">
[..]
</div>
</div>
</div>
And then set the following css,
body,html{
height:100%;
width:100%;
}
.off-canvas-wrap,.inner-wrap{
height:100%;
}
If you want to block scrolling, say for a chat client, set .page height to 100%. And that would be
body,html{
height:100%;
width:100%;
}
.off-canvas-wrap,.inner-wrap{
height:100%;
}
.page{
height:100%;
}
This is the best way I've found and its pretty simple and non-hackish
NOTE: this only works on some css3 browsers. Compatible Browsers
Sass Version:
.off-canvas-wrap {
.inner-wrap{
min-height: 100vh;
}
}
CSS Version:
.off-canvas-wrap, .off-canvas-wrap > .inner-wrap {
min-height: 100vh;
}
Edit:
Foundation 6 sites version
.off-canvas-wrapper-inner, .off-canvas{
min-height: 100vh;
}
I had the same problems and this is what i've done:
i put .off-convas-wrapper , .inner-wrapper and aside out of my main content and just use .right(left)-off-canvas-toggle inside my body and my problem has solved.
with this way i dont need contents anymore.
BTW i put .exit-off-canvas at the end of my main content befor closing inner-wrapper tag
I had to hack the JS a bit, I found that depending on when the content is taller than the browser/device height or does not push to 100% height there were issues. Here’s my suggested fix: https://github.com/zurb/foundation/issues/3800