CODEWITHSUNDEEP
htmlcssscrollbar
LPepe
LPepe

Reputation: 33

Width: 100%; give me a scrollbar

I wanted to make a sticky header and a footer in the bottom of the page

both statements are driving me crazy, because it's giving me a scrollbar.

.header {
        opacity: 0.95;
        padding-left: 3.7%;
        list-style-type: none;
        margin: 0;
        background-color: #4b4b4b;
        font-family: 'Roboto', sans-serif;
        background-image: url('img/icon.png');
        background-repeat: no-repeat;
        background-position: 14px 7px;
        background-size: 40px;
        position: absolute;
        width: 100%;
        z-index: 100;
}

.footer {
        bottom: 0;
        opacity: 0.9;
        width: 100%;
        background-color: #4b4b4b;
        color: #878787;
        text-align: center;
        padding: 6px 16px;
        font-family: 'Roboto', sans-serif;
        margin-top: 4%;
        left: 10px;
        right: 10px;
    }

How can i avoid these scrollbars please ?

Thanks!

Upvotes: 0

Views: 43

Answers (2)

patelarpan
patelarpan

Reputation: 7991

There is many way you can achieve this (below is one of that) 

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin:0;
  padding:0;
}
.header {
        opacity: 0.95;
        background-color: #4b4b4b;
        position: fixed;
        top:0;
        left:0;
        right:0;
        height:80px;
}
.main-content {
margin-top: 80px;
min-height: 100vh;
}

.footer {
      height:80px;
      background-color: #4b4b4b;
    }
<header class="header">
Header
</header>
<div class="main-content">
Content
</div>
<footer class="footer">
Footer
</footer>

Upvotes: 1

Dejan.S
Dejan.S

Reputation: 19128

It's hard because you don't provide any html structure or much css. I would guess you don't have any padding reset or box-sizing. Try adding this line on top of your css. Not sure of your level but the asterix means apply to all elements.

* {
  box-sizing: border-box;
}

Upvotes: 1

Related Questions