I have one django project. In the html template, the page length may not be constant since it may be longer if more inputs to give.
I may need to justify the length of the page to show the footer.
I try to use the relative position style for the footer, but it may not show well since if too little information may lift up the footer so high.
Hence, I may need to adjust the footer position due to the length of the page.
How could justify such length? Thanks!
The relative position is refered to the parent element. Then, in that case, you must use the absolute, to bring it always at the bottom, independentment of the height of the body or parent.
footer {
position: absolute;
bottom: 0;
}
Then, its going to be better if you define a height, otherwise the footer will be on top of the page content. Then:
footer {
position: absolute;
bottom: 0;
height: 200px // for exemple
}
.page-content {// or body
padding-bottom: 200px // height of the footer
}
Hope it helped.
Related
I want to add a logo at the bottom of the very first page. Ideally I'd position:absolute it bottom:0 - but anything positioned to the bottom in wkhtmltopdf doesn't seem to work.
This is a problem because the logo is dynamic and could have different heights depending on the aspect-ratio of the uploaded image.
I see that I can add a footer, but this adds it to all pages, and I only want this on one page.
What are my options? Do I have to position-absolute it from the top? If so, what if the page size changes? This needs to work in A4 and US Letter.
I was having the same issue and solved by actually adding a width to the element. So, for the element I want to stick to the bottom I have this css:
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
This didn't work for me. (using python's pdfkit)
I had a one page document and I wanted a footer.
I had to set the height of the page to be the height of a sheet of paper (<body style="height: 297mm">) and then absolute position worked correctly.
Had the same issue, used the answer of Carlo but changed it to use the top margin since it is using the document margins. This way the element was always on the bottom of the first page.
.footer {
position: absolute;
top: 700px;
width: 100%;
}
I want my footer to be at the bottom of the page after the content on each page (not fixed)
I read the post about creating a sticky footer, and I tried:
position: absolute;
bottom: 0;
But my footer is still right after the image which was floated. I put in a clearfix but that didn't solve it. What am I doing wrong, here is the link:
I guess your problem is the height of "main-content".
Remove it, and set:
html {
position: relative;
min-height: 100%;
}
And "padding-bottom" on your "main-content" with the same (or more) height of your footer, for spacing.
A complete example can found at CSS-tricks
Setting
position: absolute;
bottom: 0;
gets it to bottom of window but if your page is longer you get a result like your page..
Instead you could set it to fixed, wrap the other content and leave 75px space underneath for your footer, check this ;
Use:
position:fixed;
bottom:0px;
I want to display my footer at the bottom of the page, relative to the content area. So it should adapt if my browser is smaller or larger, up until where the content area stops.
I tried to follow this link but I can't seem to get it to work on my website.
I added the PUSH div at the bottom of my content area
I set the correct heights and adjustments in the css
My footer is still displayed half way on my screen and also messes up the titles. The guys that sold me the Wordpress theme are reluctant to help me ...
If anyone could guide me in the right direction that would be a great help!
I think this could do what you want:
body {
padding-bottom: 50px;
/* Set a padding-botton equivalent
to the height of your footer
this is for preventing the
footer to be covered because
of its z-index
*/
}
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: -999;
}
Hope it works ;)
Add the following code to your css:
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}
The footer will be always on the bottom.
Ok so the issue here is this, you can stick the item to the bottom as #Dzhambazov suggested either with position:absolute or position: fixed it is going to stay in place at the bottom even if that is halfway up your content.
So you can go with other alternates like: How do you get the footer to stay at the bottom of a Web page?
Mentioned in the comments, but this is not going to be as easy with a prebuilt theme as you will be fighting with the theme dev's structure.
What you could do as a fix to make it more bearable is to increase the minimum height of the content so that it "fakes" the footer further down, this has its draw backs and could mean that your footer is off the bottom of the view port, but if it is irritating you to that level. you could try.
#content {
min-height: 200px;
/* forces the content block to take up space */
}
hope that helps other wise stick the footer to the bottom as mentiones and have it always display, but note that may trash mobile so you will want to remove the positioning via a media query for phones etc.
I want to try to make a html page fit my screen while zooming.
I can not specify this more or I do not know how to explain so:
Open this site http://www.airsoftgent.be/ and try zooming out, then you will see what I mean.
Help me please!!
Thank You
Situation:
I see what you want to do. Some months ago I tried to make the same thing, with succes.
You must understand I can not give you the whole code just some basic lines. Then try to implement them yourself and if there is a problem just ask.
Solution:
I'm going to try to explain based on my own site.
What does my site contain:
First off all I have a normal HTML page with a header, main and footer. The header is not important for now.
Let's start by adding a wrap, place it round the main and footer. Like this:
<div id="wrap">
<div id="main">
<p>Some Text Here</p>
</div>
<div id="footer">Copyright</div>
</div>
Now for the CSS file:
We start bij adding the body and html tag:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
The body and html tag must contain these items! It will not work if it doesn't!
Then we add the wrap(in CSS), make shure it contains following code, you can mess with the padding, margin and width to make it look nicer but just for now only this:
#wrap{
height: auto;
min-height: 100%;
height: 100%;
position: relative;
}
Explenation:
The min-height is to make shure the height is always 100%, even is there is not much text.
The position has to be relative! For all the rest of the tags/classes inside the wrap the position has to be absolute! But I will explain that later on.
For the Height: auto we need an other explenation: since IE does not always recognizes height: 100%, you have to use auto.
Now last but not least: we have to add the main and footer in the CSS file:
#main{
height: 100%;
position: absolute;
bottom: 15px;
}
#footer{
position: absolute;
bottom: 0;
}
Explenation:
In the main you need to set the height to 100%, just to make shure it fills the whole wrap. And as I said set the positon to absolute, this has to be done just to make shure that everything stays at it's place.
Also important the bottom is now 15px, it refers to the height of the footer. I you want a lager footer edit this value as well or you will mess up things.
In the footer the same position absolute. And this time you have to set the bottom to 0px, to make shure it is place at the end of the wrap.
So I hope you understand. This works fine for me and does exactly what you asked.
You will have to use padding and margin to position some things, but that is up to you, enjoy!
I would like to position my footer at about 20 - 30px, or a percentage, from the bottom of the screen. From looking at the elements with * {outline: solid 1px} there is a rectangle along the bottom of the screen which must be either the html element or mark the bottom boundary of the body. I'm a little hazy on positioning elements and despite having played around with varius positioning options cannot get the footer where I want it. What is the best practice here? How should I position the footer?
If you want it at the bottom (+30px) of the document
footer{
position:absolute;
bottom:30px;
}
if you want it at the bottom of the document, you would need javascript to calculate the window's height
and do something like (in jquery)
$('footer').css({'position':'fixed','top':$(window).height()-$('footer').height()});
or with only CSS you can also do:
.footer{
position:fixed;
height:2%;
top:98%;
}
Without seeing any of your code, it's hard to imagine why things aren't working for you. But my first guess is that you haven't styled the body element properly. By default, many modern browsers apply some sort of padding or margin to the body. As such, you should use the following rule to reset it:
body { margin: 0; padding: 0; }
This will reset the defaults, allowing you to proceed as you like. You could also use the position: fixed CSS rule for the element you want fixed to the bottom of the screen. Example:
#footer { position: fixed; bottom: 0; height: 30px; }