I am playing around with CSS Sticky Footer and I have an issue where...
* { margin: 0; }
Although it is designed to reset all DIV margins, this is not what I want to do. The text on every page are squished and have no margins now.
I have tried defining it on every element I want but with no success i.e...
div.wrapper, div.push, div.footer { margin: 0; }
How can I bypass it so only the necessary elements by sticky footer have a margin of 0, and the rest remain untouched?
Delete the * CSS and change the HTML one to:
html, body {
height: 100%;
margin: 0;
}
.footer * {
margin: 0;
}
I don't get it.. why use sticky footer. Try creating a css table structure like this. People underestimate CSS tables! They can be awesome in creating fluid designs..
#wrapper { display: table; height: 100%; width: 1000px; }
#wrapper > header, #wrapper > footer { display: table-row; min-height: 100px; }
#main { height: 100%; }
<div id="wrapper">
<header>
<h1>I'm a header!</h1>
</header>
<div id="main">
</div>
<footer>
<p>I'm a footer!</p>
</footer>
</div>
In this CSS example none of the other elements will be affected and both the footer and header keep their height while the mid section is fluid filling the restspace..
Also take a look at table-cell.. it allowes for horizontal structurs like a solid left side with a fluid main section.
Also to correct the text in the fotter you can edit this CSS:
font: 0.8em helvetica,arial,sans-serif;
Line 50 of the style.css
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 700px;
padding: 0;
color: white;
font: 0.8em helvetica,arial,sans-serif;
text-align: center;
}
Why would you use a premade sticky footer if it's been created that easily?
Try:
<footer><span>Footer Content</span></footer>
with the following CSS:
footer{
position:fixed;
bottom:0px;
height:30px;
width: 100%;
z-index: 9999;
color: #595959;
font-size: 9pt;
text-align: center;
}
Related
I want my footer div to take all the horiziontal space available. Here is my code, but it doesn't work. Hope you can help me!
HTML
<div id=footer>
NewCom France Copyright © 2020
</div>
CSS
#footer {
padding: 12px;
background-color: #999999;
text-align: center;
position: fixed;
bottom: 0;
text-align: center;
margin: 0 auto;
line-height: auto;
}
Margin on a fixed-position element does nothing, and margin on body won't affect it either, as position: fixed positions an element relative to the viewport, outside of the flow of any other elements.
To ensure full width, a fixed-position element will need to have its right and left properties set.
#footer {
/* positioning */
bottom: 0;
left: 0;
position: fixed;
right: 0;
/* other styling */
background-color: #999999;
line-height: auto;
padding: 12px;
text-align: center;
}
As a side note, you have duplicate text-align: center values in your original CSS.
Ordering your CSS properties in a consistent way (for instance, I like to alphabetize my CSS properties, but in the example above also grouped them by type) will help you avoid potentially hard-to-find bugs or duplicate properties.
Is there enough content to fill up 100vh? You can just set your footer to fill that space if not, or set your body height or min-height
I recommend a flexbox layout where the footer does not expand but rather the main content but here is what you are looking for:
body {
display: flex;
flex-direction: column;
background-color: gray;
height: 100vh;
margin: 0;
padding: 0;
}
header {
background-color: red;
}
main {
background-color: blue;
}
footer {
flex: 1 auto;
background-color: green;
}
<body>
<header>
<p>Hi in the header</p>
</header>
<main>
<p>Hi in the main</p>
</main>
<footer>
<p>Hi in the footer</p>
</footer>
</body>
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 making a fixed width (120px) website for old feature phones that don't respond to media queries. The width of the body won't change even when I've defined it as 120px. When I open the website on the phone, it shows a huge horizontal scroll bar showing me a lot of blank space on the right which I'm assuming is the body. In the screen shot attached, I've set background color of body to red so you can see the problem (I also had to blackout the content for client privacy).
I'm using the following code:
html {
width:120x;
margin-left:0px;
}
body{
width:120px;
font-family: arial;
font: arial;
margin-left: 0px;
max-width:120px;
}
I think you've a typo here:
html {
width:120x;
margin-left:0px;
}
The width should be 120px
Remove the typo:
html {
width: 120px;
margin-left: 0px;
}
I think you have to use un child to wrap your content with a max-width.
and tags don't allow to do what you want.
HTML
<div class="wrapper">
Your content goes here
</div>
CSS
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding: 20px;
width: 120px;
height: 100%;
font-size: 14px;
background-color: #d63b24;
color: #fff;
}
http://jsfiddle.net/vinzcelavi/1rx7yn57/
Try this
body {
min-width: 1024px;
}
Here's your fiddle: http://jsfiddle.net/enxRw/1/
I am trying to make a footer, but the left and right sides show some white space. How to remove the white space?
Here is my code:
<html>
<head>
<style>
footer {
background: none repeat scroll 0% 0% #DFDFDE;
padding: 120px 0px;
text-align: center;
position: relative;
}
.divider {
background: url('http://evablackdesign.com/wp-content/themes/ebd/images/footer-border.png')
repeat-x scroll center center transparent;
height: 7px;
width: 100%;
position: absolute;
top: -6px;
}
.container {
width: 930px;
margin: 0px auto;
}
</style>
</head>
<body>
<footer>
<div class="divider"></div>
<div class="container">
<h1>hiiiiiiiii</h1>
<br>
<h2>buyyyyyyyyyyyy</h2>
</div>
</footer>
</body>
</html>
image of footer
The tag defines a footer for a document or section.
A element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
The body has a default margin. Remove it via:
html,body {
margin:0;
padding:0;
}
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
html, body {
margin: 0px;
padding: 0px;
}
*{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Try out this code:
html, body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Your body has a default margin and padding and you need to override it.
At the beginning of your style type.
body{
padding: 0;
margin: 0;
box-sizing: border-box
}
Add this to your style tag...
body {
margin: 0;
}
Just make sure to add this class to your CSS style.
.container-fluid {
width: 100%;
margin: 0px;
padding: 0px;
}
Try this; it is the simplest one, add it to your body selector.
body {
margin: 0px;
padding: 0px;
width: 100%;
}
For me, It's working
html, body {
overflow-x: hidden;
margin:0px;
padding:0px;
}
if ur having unwanted white space in right side of ur screen its because of overflow so to remove it go to ur css then in body write
in css:
(body{
width:100%;
overflow-x: hidden;
})
this is before
this is after
this is my first help i am new to stackoverflow hope this helps
Okay, so I have this code:
footer {
background-color: #359DFF;
text-align: right;
text-decoration: overline;
height: 50px;
width: 100%;
padding: 25px;
margin: 0px;
bottom: 0px;
position: absolute;
}
On this page:
http://ltd.url.ph/
I'm working on a webpage for my school, but the footer seems not to fit the page, also, in the left side, there's a gap, which makes the footer look ugly, as there's a white stripe right at the beggining of the bottom of the page which is not supposed to be there.
Any ideas on how to fix that and make the width adjust itself on all pages ? width:100% won't work for me.
To the body styles, add
padding:0;
margin:0;
Then for the footer, remove the right/left padding by doing this instead
padding:25px 0; /*This gives a top/bottom padding of 25px, and a left/right padding of 0.*/
Also, it would look better if you did text-align:center for your footer.
First of all, when you add the footer padding you enlarging it so remove the padding from the footer and add it to the p.
then you need to remove the height 50px from the footer.
and for final touch set the p margin to 0; and set the padding to :0 25px;
this will give the same look in all browsers with out the need to calc() and other weird css rules
here is the cleanest code for it:
footer {
background-color: #359DFF;
text-align: right;
text-decoration: overline;
width: 100%;
margin: 0px;
bottom: 0px;
position: absolute;
}
footer p{
margin:0;
padding:0 25px;
}
and you don't need the extra div to hold the p.
This Should work for you:
html, body{
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
margin: 0;padding:0; float:left; min-width:100%;
}
footer{
background-color: #359DFF;
text-align: right;
text-decoration: overline;
width: 100%;
margin: 0px;
bottom: 0px;
position: absolute;
}footer p{width: 95%;}