White Maskers White Maskers - 1 month ago 5
CSS Question

The content part showing extra white spacing on scroll



header{
position: fixed;
width: 100%;
height: 57px;
top: 0;
background-color: gainsboro;
float: left;
right: 0;
}
article {
/*position: fixed;*/
width: 100%;
background-color: deepskyblue;
float: left;
right: 0;
margin-top: 57px;
margin-bottom: 48px;
/*height: 100%;*/
}
footer{
width: 100%;
height: 48px;
position: fixed;
bottom: 0;
float: left;
right: 0;
background-color: yellow;
}

<header>
</header>
<article>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p><p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>testing...........</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
<p>working...?</p>
</article>
<footer>
</footer>





In this above code i'm tried to fix the top and header part always on their respective position and the content part can be scrolled according to it's length.


  1. The problem i'm facing is that when the scroll bar is moving upward there is a white space is showing.i don't know how to handle that,some times which is displayed on bottom too

  2. One another problem i'm facing is the extra padding on content part.I'm given the property value
    right:0
    to article.but it,s still showing some padding.



how can i fix this two problems?

Answer

I think this should solves your both problems...The second problem sol credits@ minal

body{
    padding: 0px;
    margin: 0px;
}
header{
    position: fixed;
    width: 100%;
    height: 57px;
    top: 0;
    background-color: gainsboro;
    float: left;
    right: 0;
}
article {
    /*position: fixed;*/
    width: 100%;
    background-color: deepskyblue;
    float: left;
    right: 0;
    margin-top: 56px;
    margin-bottom: 48px;
    /*height: 100%;*/
    }
footer{
    width: 100%;
    height: 48px;
    position: fixed;
    bottom: 0;
    float: left;
    right: 0;
    background-color: yellow;
}
<header>
        </header>
        <article>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p><p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>testing...........</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
            <p>working...?</p>
        </article>
        <footer>
        </footer>

Comments