While I nailed down a padding of 50px below my body previously, I am still having problems with a bunch of white space sitting below my footer on my pages. Do I merely need to make my content longer to fill the vertical space? I'm using bootstrap for the first time to create my new site and I am left with this annoying dilemma. here's a link to an offending page:
http://preview.yourgreatwebsite.com/ecom.php
I bet someone will look at this and show me something I'm not seeing in Firebug (or beyond Firebug). I've been looking at it for too long!
More than likely if you are using the sticky footer template from the bootstrap page you are dealing with the margin below text that is pushing the text inside the footer div further up and therefore pushing its parent element up too. I had the same issue. An easy way to fix this would be to add the following code inside one of your stylesheets.
.footer p { /* Selects text inside a <p> tag that is inside a .footer <div> */
margin-bottom: 0; /* removes default <p> tag margin from the bottom */
}
Add some bottom padding (exactly the height of your footer) to the footer's parent element which is body in your case:
body{
....
padding-bottom:70px;// You can adjust it
}
and make your footer's position absolute
.footer-main {
background: #81ccfb;
padding: 1em;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Simply remove the default Bootstrap padding from the bottom of the page:
body
{
padding-bottom:0;
}
I am using Angular with Bootstrap 5 and experienced the problem with . I added a style in the body as follows and problem went away
<body style="height: auto;">
<app-root></app-root>
</body>
You could use flexbox to fix the layout.
Css
body{
display:flex;
flex-direction: column;
}
.navbar {
order:1;
flex-shrink:1;
}
.headerstrip {
order:2;
flex-shrink:1;
}
.container {
order:3;
flex-grow: 5;
}
.footer-main {
order: 4;
flex-shrink: 1;
}
If in chrome dev tools you see that the body of the footer and the footer have different dimensions. You could add negative margin bottom to the body. It is a quick fix.
<body class="mb-n4">
</body>
This worked for me, perhaps it can help someone.
Well, the same happened to me. Turned out I was dropping the elements into the header element, instead of dropping them into the body element. If anyone has the same problem, then try dropping them into the body tag within the overview panel. A lot more accurate.
Simply add this to your footer class (in your case: .footer-main):
position: absolute;
bottom: 0;
Quick explanation: it will set your footer as a floating block, which position doesn't depend on other elements, and then it will stick the footer to the bottom of the page.
Related
code: https://jsfiddle.net/Nemoko/m8vLprb6/11/
problem:
I try to put the footer to the bottom of the page. because when I have to scroll down(when I have a lot of content in the page) the footer is in the way: but when I dont have to scroll. the footer is perfectly in place
how do I fix this?
what I tried:
adding position:relative; in the body
this however hides the footer somehow at the top of the page and margin-top does not work setting position:relative; in the footer shows it again, however than it somehow sticks to the top of the page
adding display:flex; flex-direction:column; min-height:100vh; in the body
this makes the footer appear again
I see your problem - the solution is this change both the body and footer position to relative - also change flex-direction:row not sure why you had it as column, experimenting i assume, i also added a flexbox property to space around your content. justify-content:space-around;
what i recommend further is reading this pages when you get a change, will help you with positioning and use of div/ boxes a bit better.
but in simple terms position:absolute doesn't move.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm also pretty new - so i understand where you at bro.
.content {
left: 96px;
top:200px;
width: 1728px;
position: relative;
background-color: #0fa1cb;
opacity: 0.9;
color: #FFFFFF;
}
.footer{
left: 96px;
bottom: 0;
width: 1728px;
position: relative;
display: flex;
background: linear-gradient(#0fa1cb,#000046);
opacity: 0.9;
flex-direction: row;
justify-content:space-around;
It looks like your biggest issue is that you are using absolute positioning on your content and footer sections. Setting position:absolute on an element removes it from the document flow. You would have a much easier time removing the absolute positioning from the content section and then setting position:relative on the Body element. I have always found it to be a best practice to use absolute positioning sparingly, and definitely not for large content sections that may contain an arbitrary amount of content.
Making the header { position:fixed } in a basic
<header></header>
<article></article>
<footer></footer>
layout, causes some quirks, since the article now starts at top = 0 such that its content is hidden by the header. A common workaround is to set the article's padding or margin equals to the header height. And here lays the problem: Assuming some header size is risky. Javascript can be used to measure the header heigth and set the padding accordingly, but this is not pure css. Duplicating the header with { visibility: hidden, position: initial } is the best pure CSS solution I found:
http://codepen.io/parkerbennett/pen/lzqEH
or here at position fixed header in html (#James in a comment)
Question: In the year 2017, is there a pure CSS (no JS) solution without duplicating the header, that avoids this workaround?
I came up with this flex solution, but it is not perfect and therefore does not beat the workaround above (which from user perspective is perfect):
<html>
<head>
<title>lab</title>
<style>
/* reset */
body, div {
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
article {
display: flex;
flex: 1;
overflow: auto;
}
</style>
</head>
<body>
<header>header text</header>
<article>
scrollable text
</article>
<footer>footer content</footer>
</body>
</html>
The problem here is, the scrollbar does not go over the full browser window height, but only along the article height.
I also thought about using CSS3 calc() but we cannot measure the height of the header and use this as margin inside the article-css.
It can easily done by setting the position fixed. Have a look CSS:
.ccsticky-nav {
width: 100%;
height: 60px;
position: fixed;
top: 0;
background: #139ed8;
}
For more details you can see article and demo here http://codeconvey.com/create-simple-pur-css-sticky-header/
Yes, you can use sticky positioning. This should keep the header at the top of the page and allow its size to affect the flow of the page:
header {
top: 0;
position: sticky;
}
However, it does not yet have great browser support:
http://caniuse.com/#feat=css-sticky
This seems to be the most perplexing issue of all time, at least for me. Knowing that this page, aside from the header is broken - I have copied the HTML and tried to carefully remove the WordPress related jazz so you get the html of the page.
JsBin Live Page
What I want you to focus on is the footer sitting in the middle of the page. I remove position:absolute and it sort of moves down.... It needs to stay at the bottom of the page.
This is position:fixed this is the only way it stay at the bottom, but see how the footer follows you? I don't want that.
You might say, do min-height: 100% That is not what I want either because then the container, row and column classes that have height of 100% do not work.
What I am trying to accomplish is: this type of layout. But as you can see the footer rides up...
Yes I have tried position:relative as well: check out position:Relative
So as you can see The Live page I linked you too, from everythin gI read on the internet is the right way to achieve this type of layout., How ever I must be doing something wrong ...
Update 1
Before you suggest I am missing divs, I have validated through a div checker for all of MY example and the divs are correct. I am not missing any divs. This is a pure css issue
Before you mark this a duplicate of x, y and z - I have provided three examples of the positions I have tried and none of them has worked:
position:absolute
position:relative
position:fixed - Not what I want. The footer MUST stay at the bottom of the page.
Finally, as stated min-height: 100% on the wrapper (or any other element) is not acceptable as an answer unless you can specify how I can achieve this type of layout.
The way i usually do this, is to add position: relative to html and position: absolute to the footer itself.
The main disadvantage that you have to set margin-bottom=footer-height for the body
<!doctype html>
<html>
<head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 100px; // is equal to footer height
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="footer">footer</div>
</body>
</html>
See the result https://jsfiddle.net/jy0gsgm4/
Removing height:100% from wrapper stops the spacing below the footer.
This is happening because the total height is the 100% wrapper and the height of the navbar. I would suggest putting the navbar into the wrapper div.
I'm a fan of this method.
display: inline-block;
Pretty self explanatory. HTML (Demo)
<div class="verycoolwrapper">
<!-- tons of cool stuff on page -->
<footer id="footerstay">Blah | Blah2 | Hey | Click Here | Copyright 2090</footer>
</div><!-- // end wrapper -->
CSS: (Demo)
.verycoolwrapper {
width: 960px;
background: pink;
margin: 0 auto;
position: relative; // child elements relative to this, no height needed
}
#footerstay {
// your styles
width: 100%;
height: 150px;
background: #ccc;
display: inline-block;
}
Also, alternately; clear float should work for you.
How would i go about making the div i am using to contain the page stretch all the way to the bottom of the page.
You can see that here: http://csgoshack.com/shop/index.php?page=cats The white div don't go all the way to the bottom of the page this is making it ugly.
Whats the best way to go about making this always stretch to the bottom of the page relative to the browser size?
Thanks.
If you need any code of the website to help me do this please ask.
EDIT Right all i really want is that white bar to stay static over the background and then let the products scroll over the white box so its always in the center of the page how is this possible?
I would move the top bar outside of the whitebg as it might make this easier.
Set your body:
padding: 0;
Set your .whitebg:
position: relative;
left: 50%;
margin-left: -625px;
top: 0;
padding-top: 60;
height: 100%;
You'll probably notice how you have a scroll bar on the right even when it isn't necessary. I think moving the top bar out of the whitebg will remove your need for the padding-top: 60 which should help get rid of the scroll.
** EDIT **
If you move the top nav bar outside of whitebg I think it works well leaving a lot of your css as-is.
.whitebg
position: absoulte;
left: 50%;
margin-left: -625px;
top: 50px;
padding: 10;
height: 100%;
** EDIT #2 **
The key here is to get your background to encompass the area you desire. Then user other inner elements to handle positioning of the contents within. If you try to add a margin or padding onto the outer most background element, you'll find that it will exceed the desired size since those will always add on to the height or width.
.holder
remove the padding-top
.whitebg
remove all padding
.bodycon
add margin-top: 50px;
change margin-bottom to a normal margin
.fotter
add a margin if desired
Try setting height: 100% on .whitebg selector
Just inspected your page..try to set the bottom: 0px; to your whitebg class
.whitebg {
..your existing code..
bottom: 0px;
}
First ill ask why you have all meta tags in body?:)
If the blue bar is fixed position you can try
html, body{
height:100%
}
.whitediv{
height:100%;
}
Or just doo simple jquery:
var docheight = $(document).height();
$('.whitediv').height(docheight);
And make it as function on window.resize
This Code should help you,
.WhiteBag{
height : 100Vh;
}
Ask if you have any doubt
Add these in style
.whitebf
{
height:800px;
width:100%;
}
this one in your footer
footer
{
position:absolute;
bottom:0px;
}
I have following problem.
I'd like to have header (position:fixed) and some text in article section and between this to section some space.
My CSS code :
header
{
position: fixed
margin-bottom: 10px; // <-- space I'd like to have
}
My HTML code:
<body>
<header> HEADER </header>
<article> SAMPLE TEXT</article>
</body>
But now it looks like header and article are overlapped.
http://jsfiddle.net/LvKSm/embedded/result/
So How to make this space/margin between this to section ?
You need to use margin on article tag
header {
background: #ddd;
position: fixed;
top: 0;
/* width: 100%; */ /* You would probably need this */
}
article {
margin-top: 50px;
}
Demo
Demo (Updated demo of the fiddle you created)
Some Explanation, you are using margin-bottom on header tag, which is a fixed position element, now when you make any element fix, it just gets out of the document flow, and your margin won't have any affect on any element on your document whatsoever.
Also remember to use top: 0; for the header element or when you will use margin-top on article, it will also take header element along.
P.S Commenting using // is invalid, you need to use /* Comment goes here */
This is probably what you want. You need to set a margin on the element following header with a value that equals the header + 10. You have to do this, because the element header has a position fixed which "removes" it from the natural flow of the document, i.e. it will sit on top of the rest of the content, and the other content ignores it. Therefore, article ignores the position of header and takes up its place.
header {
position: fixed;
height: 100px;
width: 100%;
background: red;
top: 0;
}
article {
width: 100%;
margin-top: 110px; /* height header + 10px */
background: blue;
}
If the height of the header is dynamic, you can set the margin-top of the article with jQuery (or JS). Fiddle.
$("article").css({
"margin-top": $("header").height() + 10
});
Edit: I edited your Fiddle, which now works just fine.
The best thing to do here would be applying padding-top to your body tag. SEE THE DEMO
body {padding-top: 120px;}
While also not forgetting to give top: 0; to your header tag since it has a fixed position which is also the reason why margin-bottom won't work for it.