Home Footer cover part of body content
Reply: 3

Footer cover part of body content

shjnlee
1#
shjnlee Published in 2018-02-14 09:53:42Z

I'm working on a page that has a header and footer. For some reason, the footer is covering part of the body content no matter how I modify the footer css. Currently, my css is

       html {
          height: 100%;
          box-sizing: border-box;
        }
        
        body {
          position: relative;
          margin: 0;
          padding-bottom: 6rem;
          min-height: 100%;
        }
        
        .navbar {
          margin-bottom: 20px;
        }
        
        .footer {
          width:100%;
          height:6%;
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          padding: 1rem;
          background-color: #efefef;
        }
    <footer class="footer fixed-bottom navbar-dark bg-dark">
        <div class="container">
            <p class="text-muted text-strong">Copyright (c) information and other stuff</p>
        </div>
    </footer>

Could someone point me to how to fix that problem? Also, a side topic, but how could I adjust the width of the button, so they have the same width (for Revoke/Grant Access buttons). Thanks

WebDevBooster
2#
WebDevBooster Reply to 2018-02-14 10:22:03Z

In the code snippet below the classes mb-5 pb-5 have been added to the preceding container to achieve the desired effect. No custom css necessary in this case.

mb-5 means "margin-bottom 5 units" and pb-5 means "padding-bottom 5 units".

Click the "run code snippet" button below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container mb-5 pb-5">
   <div class="row">
       <div class="col-6">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum et odio quibusdam laudantium amet, laboriosam soluta saepe dolorem ratione, iusto, illo eaque. Fuga unde, natus labore delectus laboriosam voluptatibus eligendi quod ratione soluta quos autem, fugiat ex nesciunt aliquam pariatur in, beatae, maiores sapiente cumque ipsa maxime! Velit deserunt aliquid cupiditate tempora quidem voluptatem harum. Reiciendis iusto iste mollitia, quo reprehenderit laborum unde praesentium molestias. Quibusdam incidunt officia a, ea, animi eos atque ratione facere, temporibus necessitatibus quidem iure deleniti. Cupiditate similique laboriosam perspiciatis eaque odit provident libero fugiat est dicta, praesentium voluptas amet asperiores incidunt doloribus officiis itaque! Necessitatibus libero.
       </div>
   </div>
</div>

<footer class="footer fixed-bottom navbar-dark bg-dark">
    <div class="container">
        <p class="text-muted text-strong">Copyright (c) information and other stuff</p>
    </div>
</footer>

teevik
3#
teevik Reply to 2018-02-14 10:07:23Z

Probably way easier to make the footer not have absolute positioning. Otherwise you would need to make sure the body has padding-bottom to the same height as the footer.

Hanif
4#
Hanif Reply to 2018-02-14 10:19:35Z

Please apply padding bottom of body selector according footer height. Suppose you set height in your footer height:6%; so you need to padding bottom 6% then you can reach at content of bottom.

This should work for you:

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  padding-bottom; 6%;
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.322525 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO