I found other posts here but none of them had an explanation of the problem. Here is a basic example of what I'm talking about: https://jsfiddle.net/p1e5krn6/.
HTML
<nav>
<ul>
<li>About</li>
</ul>
</nav>
</header>
<div id="content">
Lorem ipsum dolor sit amet.
<div id="one">asdasd</div>
<div id="two">asdasdasd</div>
</div>
<footer>footer</footer>
</body>
CSS
html, body {
height: 100%;
background-color: yellow;
}
header,footer{ background:blue; }
header {
width: 100%;
height: 100%;
}
header nav ul li {
display: inline-block;
padding: 0 30px 0 0;
}
#content {
background-color: pink;
width: 60%;
height:100%;
margin: 0 auto;
}
#one, #two {
height:100%;
}
footer {
width: 100%;
}
What I would really like to know is why that footer goes up like that. I know how to solve the problem, I could put the footer inside the content div but that would be semantically wrong. What I would like to have is not a solution but a reason that would explain me the behavior of that footer.
This is happening because you have given 100% height to the div #one and #two along with 100% height to content. Logically if they are part of the content only, then why give then complete height as well. Removing that property from those two divs solves the problem. See the fiddle: "https://jsfiddle.net/p1e5krn6/1/"
Remove the following style:
#one, #two{
height:100%;
}
Can you try this one? demo
*{
float:left;
}
Related
I am having great difficulty making my footer stick to the bottom of the page in my angular application. I have tried a number of different things but cant seem to figure out what i am doing wrong. I have defined the height of the container div so i know the viewport size therefore the footer should be able to identify the bottom of the viewport and stay there. However as the content grows the footer does not grow with the content.
HTML:
<body style="margin:0; padding:0; height:100%;">
<app-root></app-root>
</body>
app-root html:
<div class="container">
<app-header id="header"></app-header>
<div id="body">
<router-outlet></router-outlet>
</div>
<app-footer id="footer"></app-footer>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
height:100%;
position:relative;
}
#header {
padding-bottom:10px;
}
#body {
padding:10px;
padding-bottom:10px;
}
#footer {
position: absolute;
bottom:0;
width:100%;
height:60px;
}
Put your app-footer in separate div and add the following class:
<div class="fixed-bottom">
<app-footer></app-footer>
</div>
in style:
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
Using flexbox is probably going to offer the cleanest implementation and has good browser support.
Here is what I've done in the past, noting that the content is just there so the snippet displays as intended.
The structure below is similar to your question. You may need to break it down into components as suited for your app. Note my usage of class selectors instead of id selectors, as another answer noted there was a typo in yours for #container and .container.
html, body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background-color: powderblue;
}
.content {
flex: 1 0 auto;
background-color: salmon;
}
.footer {
flex-shrink: 0;
background-color: orchid;
}
<body>
<app-root>
<div class="container">
<header class="header">
<app-header>header content</app-header>
</header>
<main class="content">
<router-outlet>main content</router-outlet>
</main>
<footer class="footer">
<app-footer>footer content</app-footer>
</footer>
</div>
</app-root>
</body>
This answer is based on a snippet from Sticky Footer, Five Ways using the flexbox option. You can view alternatives in that article.
1) typo error css assign to id #container HTML use to class
2) Remove height #container
3) Add padding-bottom #body is footer height;
changes CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
/*height:100%;*/ /*Remove this*/
position:relative;
}
#header {
padding-bottom:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Add Padding footer Height*/
}
#footer {
position: absolute;
bottom:0;
width:100%;
height:60px;
}
Using flexbox this should be quite simple.
<body>
<header>...</header>
<main class="main-content">
...
...
</main>
<footer>...</footer>
</body>
Whatever is your main content container (in this example it is .main-content class, apply this flex style to force it takes max height pushing the footer to the bottom.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1 0 auto;
}
So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.
But if I put everything to a container div with height:100%; and make footer bottom:0; then the page will be "too long", you have to scroll, etc...
My css so far:
#footer{
background-color:#fff;
font:bold 14px;
color:#1E88E5;
width:100%;
height:auto;
padding:1%;
border-top:1px solid #1E88E5;
}
Footer is just a normal full width div with some centered text atm.
You can probably use position: fixed to achieve this.
.footer {
position: fixed;
bottom: 0;
}
With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.
.main {
padding-bottom: 30px /*whatever the height of your footer is*/
}
Pritesh Gupta's solution works really well for me:
I'm copy+pasting the code in case their site goes down:
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer</title>
</head>
<body>
<main>stuff</main>
<footer>© 2016</footer>
</body>
</html>
Here's the CSS:
body {
margin: 0;
}
main {
min-height: calc(100vh - 4rem);
}
footer {
height: 4rem;
}
I don't know if it works in old browsers but I'm not so worried about that myself.
It also depends on you knowing the height of your footer, although it's worth pointing out that you don't necessarily have to set the height manually like in the code above since you can always figure out what it is if you know how much vertical padding and line-height the contents have...
Hope this helps, I spent most of the morning trying every single sticky footer tutorial on the web before stumbling across this technique and whilst other techniques do work this one requires minimal effort.
If you need sticky footer you can make it with 2 solutions.
Solution 1:
HTML:
<div class="wrap">
Content
</div>
<div class="footer">
Sticky Footer
</div>
CSS:
body, html, .wrap{
height:100%;
}
body > .wrap{
height:auto;
min-height:100%;
}
.wrap:after {
content: "";
display: block;
height: 100px;
}
.footer{
background:#662e8c;
margin-top:-100px;
height:100px;
color:#fff;
position:relative;
line-height:180%;
padding:0 10px;
}
Example: https://jsfiddle.net/ta1amejn/
Solution 2 (With table properties):
HTML:
Content
Footer
CSS:
body{
display:table;
width: 100%;
}
html, body{
height:100%;
}
.main{
height:100%;
width:100%;
padding-bottom:20px;
background:#eee;
display:table-row;
}
.footer{
/*height:30px;*/
line-height:30px;
width:100%;
background:#00f0ad;
display:table-row;
}
Example: https://jsfiddle.net/zbtaoq1b/
If you want a fixed footer use this solution:
.footer{
position: fixed;
bottom: 0;
}
You can do that easily with the display: flex.
You don't care about height body or wrapper tag.
Example: Please change the height of main tag any value if you want, footer always sticky to bottom(not position: fixed).
https://codepen.io/tronghiep92/pen/dzwRrO
HTML markup
<div id="wrapper">
<header>my header</header>
<main>main content, please change height</main>
<footer>
my footer
</footer>
</div>
CSS Solution
#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
margin-top: auto; /* this is the solution */
}
main {
height: 100px
}
Or you can:
#wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
}
main {
flex: 1;
height: 100px;
}
I'm sure I'm missing something here... so I've dumbed down my question as much as I can so it makes sense. (I'm somewhat a novice at using CSS properly).
To clarify, I made a graphic that shows what I'm trying to accomplish, but I can't seem to get it right and I've been trying all day. I need a 100% wide header div, content in the middle, and a 100% wide footer div. My footer div keeps going up behind my content area. CANT figure it out.
<div id="HEADER"></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo"></div>
<div id="top-right-date"></div>
</div>
</div>
<div id="FOOTER"></div>
I've also included a fiddle:
http://jsfiddle.net/b9kah2wx/
Thank you!!
I've made some changes to your jsfiddle http://jsfiddle.net/b9kah2wx/2/
#HEADER {
height:300;
width: 100%;
}
#CONTENT {
background-color: #C0F;
height:auto;
width: 100%;
}
#FOOTER {
background-color: #C00;
height:500px;
width: 100%;
}
#contentwrap {
width: 66%;
height: auto;
margin: 0 auto;
background-color:#0ff;
}
#top-left-photo {
float:left;
height: 180px;
width: 40%;
margin-right: 15px;
background-color: #555555;
font-family:"Dirty";
}
#top-right-date {
float:left;
height: 180px;
width: 40%;
margin-right: 0px;
background-color: #555555;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
You'll notice I changed the fixed width to percentages just so I could work with it in the jsfiddle but the basic idea is there.
You also need to clear your float:ed elements so the parent div#contentwrap height problem will get fixed. I've added this code for you.
and this is your HTML
<div id="HEADER"><h1>header</h1></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo">photo</div>
<div id="top-right-date"> date</div>
<div class="clearfix"></div>
</div>
</div>
<div id="FOOTER"></div>
Do this: Add the below code to your css file
* {
margin: 0 auto; /* Centers everything with a given with except when floated or altered with margin and position properties */
}
Note: It's important that you clear your floats as Paulie_D mentioned
Im trying to build a layout for a site and here is my css and html.
Problem:
1.With header and navigation div, I dont use the margin merge but still feel it got merge
2.With navigation and left-nav/content divs the merge is not happening
Can someone explain whats happening?
html
<div id="container">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="left-nav">
</div>
<div id="content">
</div>
</div>
css
html, body {
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
}
#header {
height: 15%;
width: 100%;
background-color:grey;
margin:1%;
}
#navigation {
height: 5%;
width: 100%;
background-color:grey;
margin:1%;
}
#left-nav {
height: 40%;
width: 20%;
background-color:grey;
margin:1%;
float:left;
}
#content {
height: 40%;
width: 70%;
background-color:grey;
margin:1%;
float:left;
}
jsfiddle
Actually all you need to do is to use a global CSS reset or
*{margin:0; padding:0;}
which will remove also the default margin the browser adds to body.
than just go all over your CSS and remove width: 100%; from your DIV elements cause they are already set to auto by default (being block-level elements).
Now that you've done that, for all other elements, all you need is some simple math...
100% - (1%(or 0.5%?) margin * 2sides * No of elements) etc :)
http://jsfiddle.net/7L98c/2/
The merge doesn't happen between navigation and left-nav/content is that you float left-nav and content. When an element is "float", margin around it would not merge with others'.
So I have a 2 div layout where both divs background needs to be filled full height. But I can't get it right. As I have been relatively out of scripting I think there should be a new and better way then using a background image. Here is the HTML:
<div id="ContentContainer">
<div id="Menu">asdasda
</div>
<div id="Content">Content<br>M<BR><BR>dsfsdf</div>
</div>
And the css:
#ContentContainer {
width: 100%;
}
#Menu {
float: left;
width: 250px;
background-color: #bababa;
}
#Content {
overflow: hidden;
}
here is the example http://jsfiddle.net/DenErello/dzt4Y/
You use the Properties position:absolute and position:relative
Check this Answer: http://jsfiddle.net/dzt4Y/2/
Just set the min-height of html and body and your own divs.
html, body, #Menu, #Content {
min-height:100%;
}