White Maskers White Maskers - 1 month ago 6
CSS Question

Is It possible to add scrollbar with a specific part in a website?



header {
position:fixed;
background-color:#4F5467;
top:0;
float:left;
width:100%;
height:60px;
}

footer {
position:fixed;
bottom:0;
float:left;
background-color: yellow;
width:100%;
height:45px;
}

main {
width:96%;
margin-left:2%;
margin-right:2%;
margin-bottom: calc( 45px + 2%);
margin-top:calc( 60px + 2%);
background-color:red;
margin:1px solid red;

}

body{
width:100%;
height:100%;
background-color:#edf1f5;
}

<html>
<body>
<header>
</header>
<main>
<p>from <a href="http://goldendreamrz.blogspot.in/">http://goldendreamrz.blogspot.in/</a><p>
<h4>ramakkal medu</h4>
<p>This is a very popular and very beautiful tourist area. This place is near the Kerala - Tamil Nadu border.
</p>
<p> This is really a view point.From the top of this mountain you will obtain an awesome view of Tamil Nadu.
</p>
<p>You can see the crops and plots like an awesome drawing. The other specialty of this place is the clouds and the snow.
</p>
<p>Most of the time this place is covered with the clouds and snows. This mountain
Suicide Point
have a sharp edge which has a nick name "suicide point". The People wish their death should be in a beautiful place like this, that's why they called this place as suicide point.</p>
</main>
<footer>
</footer>
</body>
</html>





In this code i'm trying to add a scrollbar with my website.i need to be to add the scrollbar associated with the main part(currently the scrollbar appears on whole part) and hence the main part need to be displayed with a uniform margin from all sides.

I added a model for better understand-ability about the problementer image description here.this is an example with following criteria(content part have uniform margin from all sides, and it's also have own scroll from top to bottom and left to right).how can i obtain this?

Answer

header  {
 position:fixed;
 background-color:#4F5467;
  top:0;
  float:left;
  width:100%;
  height:60px;
}

footer {
position:fixed;
bottom:0;
float:left;
background-color: yellow;
  width:100%;
  height:45px;
}

main {
  width:96%;
  margin-left:2%;
  margin-right:2%;
  margin-bottom: calc( 45px + 2%);
  margin-top:calc( 60px + 2%);
  background-color:red;
  margin:1px solid red;
   height: 100px;
overflow-y:scroll;
}

body{
 width:100%;
 height:100%;
 background-color:#edf1f5;
}
<html>
  <body>
    <header>
    </header>
    <main>
      <p>from <a href="http://goldendreamrz.blogspot.in/">http://goldendreamrz.blogspot.in/</a><p>
      <h4>ramakkal medu</h4>
      <p>This is a very popular and very beautiful tourist area. This place is near the Kerala - Tamil Nadu border.
        </p>
     <p> This is really a view  point.From the top of this mountain you will obtain  an awesome view of Tamil Nadu.
       </p>
      <p>You can see the crops and plots like an awesome drawing. The other specialty of this place is the clouds and the snow.
        </p>
      <p>Most of the time this place is covered with the clouds and snows.  This mountain 
Suicide Point
have a sharp edge which has a nick name "suicide point". The People wish their death should be in a beautiful place like this, that's why  they called this place as suicide point.</p>
    </main>
    <footer>
    </footer>
  </body>  
</html>