Removing white space below Footer
Question
I have empty space below the footer which I want to remove.
Attached are my HTML and CSS codes for Footer.
footer { text-align: center; font-size: 0.9rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin-top: auto; }
<footer class="footer py-4"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4 text-lg-start">Copyright © myWebsite</div> <div class="col-lg-4 my-3 my-lg-0"> </div> </div> </footer>3 answers
solution1
0 2022-12-31 03:13:45
You can try this
footer { text-align: center; font-size: 0.9rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin: auto; position: absolute; width: 100%; bottom: 0; }
<footer class="footer py-4"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4 text-lg-start">Copyright © myWebsite</div> <div class="col-lg-4 my-3 my-lg-0"> </div> </div> </footer>
solution2
0 2022-12-31 04:26:35
There are many ways to achieve a bottom most footer @chyke007 showed a solution using positioning absolute to start the element at the relevant elements bottom. This is a very common way to achieve a sticky bottom but you must stay aware of the relevant positioning ancestor and sibling element. Also if you did want to use absolute position then it maybe wise to add padding bottom to the main content that is at least the min set height of your footer. This is so your content does not run underneath your footer also you will need to be aware of your position zindex for other element may running over-top or underneath. For any positioned element its a good idea to have indexing zone for where you want positioned element to exist such as 1-1999, 2000-3999, ect or how every you wish to define these zone for your project this is to try and limit element overlap.
The another solution is to use layouts such as flexbox columns
html, body { margin: 0 } body { min-height: 100vh; display: flex; flex-direction: column } header { background: #333; flex: 0 0 60px } h1 { color: #eee; padding-left:15px; font: bold 1.2rem/60px "Montserrat" } main { flex: 1 1 auto; min-height: 500px } footer { background: #ccc; flex: 0 0 100px; text-align: center; font-size: 0.9rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
<body> <header> <h1>Stack Example</h1> </header> <main></main> <footer class="footer py-4"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4 text-lg-start">Copyright © myWebsite</div> <div class="col-lg-4 my-3 my-lg-0"></div> </div> </div> </footer> </body>
Also if you are going to style elements try to not add dead styling as your footer has text-center and margin auto there isn't no need the margin. But I am guessing you were trying to use the margins to center the element but without defining a width or max-width the margin auto will do nothing. These are things to be aware of plus this removes all the unneeded bloat for any project.
-I hope this is helpful!
solution3
0 2022-12-31 08:23:40
You can try this.
footer { min-height: 100vh; display: flex; justify-content: center; align-items: flex-end; font-size: 0.9rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin-top: auto; }
<footer class="footer"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4 text-lg-start">Copyright © myWebsite</div> <div class="col-lg-4 my-3 my-lg-0"></div> </div> </div> </footer>I hope this is helpful
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.