CODEWITHSUNDEEP
htmlcss
neo
neo

Reputation: 1404

Why bottom toolbar(footer) overlaps my content?

I want to create sticky bottom toolbar that always stays at the bottom. It always should be visible on a screen. I tried to use position: fixed, bottom: 0 which definitely helped, but it overlaps my content. Here is how it overlaps (look at the bottom of the page):

enter image description here

Yes, I understand that it should overlap, but the problem is that I cannot scroll to bottom to see remaining text.

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        body {
            margin: 0;
            padding: 0;
        }

        .bottom-toolbar {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="article">
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
        </div>

        <div class="bottom-toolbar"> 
            <p> My toolbar </p>
        </div>
    </div>
</body>
</html>

How can I solve this problem?

Upvotes: 2

Views: 814

Answers (2)

Yadab Sutradhar
Yadab Sutradhar

Reputation: 659

position: fixed; always relative to viewport or, you can also use margin bottom to .article or padding-bottom: 60px (or your fotter-bar height) to .container.

  • if choose to give margin, do in .article
  • or, if choose to give padding, do it in .container or body (bcz fixed positioned is relative to viewport & after container if any other div comes)

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        body {
            margin: 0;
            padding: 0;
        }

        .bottom-toolbar {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: yellow;
        }
        .article {
          margin-bottom: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="article">
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
            <p>Lorem ipsum... Lorem....(a lot of text here)</p>
        </div>
        <div class="bottom-toolbar"> 
            <p> My toolbar </p>
        </div>
    </div>
</body>
</html>

Upvotes: 1

J.E.C.
J.E.C.

Reputation: 3012

The footer is on top of the layer with the article text, so you can solve it by "making room" with some padding:

.article {
    padding-bottom: 40px; 
}

40px; is just enough in a codepen, but add however much you want.

Upvotes: 2

Related Questions