This footer on Stack Overflow is a dream: full length footer in color different than body, yet with text that is aligned with the center column AND it's sticky to the bottom of the page.
I think I got the sticky part but can't conceptualize how the alignment with the full length footer does its thing.
I'm wondering if anyone has successfully built a footer like the one here in Stack Overflow and if they can help me understand the coding.
It's because stackoverflow, like many sites, uses a widely accepted 960px page container width standard.
Within your full-width footer container, put a second, invisible container for the content, whose width is the same as the width of the main document body, e.g. 960px. Here is stackoverflow's body container:
#content {
margin: 0 auto;
width: 960px;
min-height: 450px;
}
And here is the container for the footer content:
.footerwrap {
margin: 0 auto;
text-align: left;
width: 960px;
}
Additionally, I don't think the footer 'sticks' to anything. It's simply at the end of the document, so it's rendered at the bottom of the page. I might be wrong as I haven't looked at stackoverflow's html source in that much detail, but anything else seems like overkill.
Related
I have an angular page, home, which is comprised of 2 components and a router-outlet
<div class="home-container">
<header></header>
<sub-header></sub-header>
<router-outlet></router-outlet>
</div>
I want the home-container above to always be, at a minimum, full screen height. The header should show, then the sub-header, then the contents of the router-outlet should always fill up at least the rest of the screen (or more if there's more content of course).
Normally this is easy but it seems the router-outlet is messing it up. Example can be seen http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas , hit run and then click the "Heroes" link to route. In this example I don't want the Heroes div to be taller than the screen, and don't understand why it is.
My styles to accomplish this are. (assume router-outlet is on 'my-page')
html, body {
height: 100%;
}
.home-container {
height: 100%;
}
.my-page {
height: 100%;
}
My expectation here obviously is that home-container is full screen, shows header, shows sub-header, and that my-page then fills in at a minimum the rest of the vertical height.
What is actually happening though, is that there's a scroll bar with available height that appears equal to my header and sub-header.
This plnkr http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas illustrates exactly my meaning. If you click Run and then the link for "Heroes" you will see the router-outlet contents, in this case heroes-list.component, with a green background. I do not understand why the green here is bleeding below the screen when everything is set to 100%
Update I have tried using all manner of different CSS attributes to different levels in this nesting. Including 100vh vs 100%, min-height vs height, and every combination of body/html/home-container/my-page. I have also tried the same with Angular's CSS :host, to the same result of no different
Update2 If I move it out of the element then everything behaves as you'd expect and there's no vertical scroll bar. Something about the router-outlet wrapper adds vertical space somewhere but I cannot figure out where or what is causing it.
Final Update The below answers might be useful for some applications but I ended up just solving it by giving the .my-page a specified height, just doing height: calc(100vh - $headerheight - $subheaderheight) which gets the job done
As far as I understand, 100% on a child will be equal to the size of the parents natural height. If you want to fill the space available, you really should be using flex unless you have a requirement to support IE9 and below.
I would update your Anchors to be contained in a div (or another wrapper)
<h1 class="title">Component Router</h1>
<div>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</div>
<router-outlet></router-outlet>
I would then utilize flexbox to allow the content to expand as required
.hero-list {
background-color: green;
height: 100%;
overflow:auto
}
undefined {
flex: 1;
}
body, html, my-app {
height: 100%;
}
my-app{
display: flex;
flex-flow: column;
}
Plunker to test: http://plnkr.co/edit/yE1KOZMr1pd5jQKlVYIN?p=preview
On chrome i still have scroll bars due to an 8px margin on body - this can easily be removed with CSS for a scroll free full height experience.
There are two causes that make your <body> element taller than 100% of the viewport:
Default margins of the <body> element that come from the browser's built-in styles and usually are 8px. This means that the <body> element will be as tall as the <html> element, but also will have 8px space above it and below it, causing the <html> element to overflow.
The top margin of the <h1> element "falls out" from the container due to margin collapsing. This makes the space above the <body> element equal to the default top margin of <h1> (about 21px instead of 8px).
Setting zero margin to <body> (part of ToTaTaRi's answer) helps you to solve the 1st issue. To solve the second one, you should make the <body> element or (probably better) the .my-app container establish the new Block Formatting Context. The easiest and most cross-browser way for this is setting the container overflow:hidden (other options are display:flow-root, which works for modern Chrome/Firefox, or column-count:1, which works in IE10+ and all modern browsers, you can compare nearly all the options in this live example).
First of all you should reset browser default styles at least somehow like this:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Then you could achive what you want without a flex layout if prefered through splitting the page into a header section and main content section with a preset division... So lets say the heading and the links go together into a container div with i.e. a height of 20% and the main content which is at the moment hold in a tag "undefined" gets a height of 80%, if you now set the height of the app container to 100% or 100vh it should work as expected!
EDIT (because the topic is still open...):
Have you tried this css code like explained above, works like charm!?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, my-app {
height: 100%;
height: 100vh;
}
h1 , h1 + div {
height: 10%;
height: 10vh;
}
undefined {
display: block;
background-color: green;
min-height: 80%;
min-height: 80vh;
}
I am working on a website and have tried to stick the footer to the bottom, since many pages will not be long enough to push the footer to the bottom.
I have applied this technique: http://mystrd.at/modern-clean-css-sticky-footer/
My page can be viewed here: https://jsfiddle.net/cgLf0oLa/
I believe that this CSS input is very important:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px;
}
However, I am experiencing trouble. The footer is being rendered on top of the other content, and I have no clue how to make it adjust to the content size.
Help is much appreciated.
Kind regards,
Clemens
Try adding an :after with height equal the height of the footer to the wrapper above the footer. It leaves blank area below the footer, which pushes the footer to the bottom.
Maybe the title is not easy to understand, sorry.
My problem in detail: i created a wordpress theme with an header. This header is surrounded by the "header-div". The header div has a width: 100% and a coloured background. But if the content in another div below overflows the viewport and you scroll horizontal, the background is white.
I know that the "width:100%" just is 100% of the parent element, but there is just the body. And the body has "width:100% and height:100%".
Where is the mistake?
Here is the site:
http://ericgerhardy.de/selltron/
Just try to reduce the browser width to 500px and scroll to the right. This should show my problem.
PS. I´m sorry if the question is already answered, but i searched for a while, with no results.
The white background appears because you have set a min-width: 1000px at some of the elements below the header.
If your only concern is to prevent the white background from appearing at the right side of the header on smaller screens and you don't care about having a responsive page (which is the case, if I understood your question), then you need to add min-width: 1000px; to your #header as well like this:
#header {
background-color: #D3D0CE;
height: 245px;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 99999;
min-width: 1000px; /* This is the extra line */
}
The problem is that absolute positioned elements doesn't resize their parents but overflows them.
In this case your body is overflowed and a scrollbar appears but his size is still 100% of the viewport, because he is not expanded.
The abuse of absolute positiong often leads to such problems. Try tu use static positioning as much as possible. In this case it's really easy to use static positioning.
I have a very specific issue with my sidebar in a tumblr blog. I have put it in to encompass all the navigation and fixed it on the left, but it overlaps the main column:
I cannot find a way of making the main body separate and starting to the right of the sidebar. I am clearly missing something. (Well, I think I need to encompass and define the position of the posts, but I can't see where or what.)
Thank you,
Ana
It's the position: fixed on the sidebar that is giving you grief. If you must have that, you could set a left margin on the #main section:
#main {margin-left: 200px;}
It leaves a very narrow content area, though, so I would consider widening the layout a bit.
I'm not a fan of margin: 0 auto; on the body element. Preferably, place everthing in a centered wrapper.
If you want the content to wrap around the sidebar, then remove position: fixed from the sidebar, remove the margin I showed above, and also remove overflow: hidden from here (line 265f.):
article > div {
padding: 0px;
overflow: hidden;
}
That will mean that the sidebar will scroll with the content, though, and not be visible all the time.
I'm using Twitter bootstrap with a template I purchased. I had to do a bit of work to get the footer to appear and look acceptable, but now it is always too low.
What I mean is, white space will always be added so that the footer is below the bottom of the screen - you always have to scroll down to see it.
Here's a link to the site. You only need to look at the homepage to see the problem.
If you want to remove the extra white spacing that is causing your page to grow more then it should, just remove:
body {
padding-bottom: 40px;
padding-top: 60px;
}
#wrap {
min-height: 100%;
}
html, body {
height: 100%;
}
If what you are trying to achiev with the footer, is to allways stick it on the bottom of the page you should follow a technique called sticky footer something like this
The problem seems to be that you have the #wrap element set to 'min-height: 100%;'. If you are ok with the footer just being at the bottom of the content rather than the bottom of the page then removing that should be an easy fix.