I'm trying to get a sticky footer with polymer, using something similar to this: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ The problem I'm running into is that the mainContainer div is not a flex column container.
Related
I'm creating a template using bootstrap and the content area is adjusting self according to contents inside it. and if there is less content text then footer and nav gets so closer like see this pic if there is no content text.
image
How can I set minimum height of content so that footer will stay on browser footer and there will be space for content between header and footer.
You could use css like this to set the minimum height to that of the viewport:
minimum-height: 100vh;
The first approach is to make sticky footer when you are using bootstrap, add the class footer in footer wrapper and it will stick to the bottom.
Take a look at the example template provided by bootstrap
Bootstrap sticky footer Template
I have the following html configuration
header div with a message div set to position fixed with high z-index.
bellow, content div with low z-index.
On scroll everything works perfect in IE11 on Windows 10. Problem is when overflow-y:auto is activated on the content div it will make the content above message.
Setting the message div with -ms-device-fixed instead of fixed will make the divs respect the z-indexes and remove the issue.
Why this is happening?
if you want to find why content penetrate look here:
https://msdn.microsoft.com/en-us/library/ms531188(v=vs.85).aspx
and about -ms-device-fixed property it seems that it just doesn't let content to be overflow in some way.
I'm stuck on a problem with using the Angular Material JS and CSS. I'm having problems getting the <main> tag to take up the available height without pushing my footer below the bottom of the window. I've been banging my head against this for 2 days now, and I know it's got to be something simple that I'm missing between all of the flex-ing and layout-fills.
Codepen: http://codepen.io/snydercreative/pen/KdBzXp
It's something I've been struggling with too. Turns out for flex to expand properly it has to be inside of a layout. http://codepen.io/anon/pen/pjZROp
Here's the key parts:
<div class="wrapper" layout-fill layout="column">
and
<main flex>
As long as main is the only flex element inside its parent layout, it will grow to the proper height.
Here's a simplified version to hopefully make it a bit clearer: http://codepen.io/anon/pen/mejRze
I've got a fixed header element that I would like to stay fixed on scroll. The scrollable area, however, I would like it to be positioned directed after the fixed element, but I don't want to use position: absolute and remove it from the document flow.
I've created a Codepen here to illustrate the problem I'm having. I would like the red element (.top) to stick on scroll, without hiding the first list item.
Is there a way to go about doing this in CSS (possibly using flexbox) that doesn't require any JS?
Any help is appreciated.
Thanks in advance!
If my understanding of your question is correct, you want to make no changes except for the scrollable content to not be hidden behind the fixed header.
The fixed header seems to have a natural height of nearly 20px.
So you can apply a top margin to the scrollable content which pushes it down from the top, until it clears the header.
Try adding this to your CSS:
div.list { margin-top: 20px;}
This will push the div containing all the list items 20px from the top.
DEMO: http://codepen.io/anon/pen/EVWYJd
UPDATE
The answer above works when the height of the fixed header is known. But based on feedback in the comments, the height of the header varies. So a solution is needed that keeps the scrollable content beneath the header regardless of the height of the header.
This issue has been addressed in these posts:
How do I use CSS to position a fixed variable height header and a scrollable content box?
Creating a variable height "fixed" header in CSS with scrollable content
I am having some trouble with the layout of a website that has a header, content, "sticky" footer, and a sidebar. The sticky footer, header and content combination is not a problem by itself, but I can't for the life of me figure out how to add a sidebar that goes from the header right down to the footer without messing up the "stickyness" of the footer.
The way I am approaching it now involves absolute positioning. I basically make a header div (height: 71px; top: 0px;), a footer div (bottom: 0px; height: 30px;), and a content div (top:71px;bottom:30px;). I then float the sidebar left inside the content div and make its height 100%, and add another div (call it "view") next to it for the actual site content. This makes sure the sidebar is nicely from the top to the bottom, and the footer is normally at the bottom of the page.
However, problems arise with this approach when the window is resized, especially so when the content is too large to fit in the "view" div itself. This results in the footer cutting off the content, and scrolling down makes the footer move up in the window. I would like to achieve a footer that behaves like this, but also have a sidebar that ALWAYS stretches from the header to the footer of the page.
If anyone could think of a way to add a such a sidebar to the page linked above or has any ideas on how I could go about tackling this problem, it would be greatly appreciated. Thanks beforehand.
Do you think you could post some example HTML and CSS you have besides just the div height and positioning?
What I was thinking is you could throw another <div> inside the sidebar <div> and set the margin-bottom or padding-bottom to 30px. I'll work on a jsFiddle for you.
You can always put an overflow: auto on your view div.
http://jsfiddle.net/dzRZd/
Edit:
With fixed positioning instead:
http://jsfiddle.net/ekSvQ/2/