是否可以在网站的特定部分添加滚动条？

Question

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>

在这段代码中，我试图添加一个滚动条，我的 website.i 需要添加与主要部分关联的滚动条（当前滚动条出现在整个部分），因此主要部分需要以统一的边距显示。

为了更好地理解问题，我添加了一个模型。这是一个具有以下标准的示例（内容部分从各个方向都有统一的边距，它也有自己的从上到下的滚动从左到右）。我怎样才能得到这个？

Answer 1

将overflow: auto;交给想要的容器：

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
#page {
  height: 100%;
}
#header {
  height: 50px;
  background: yellow;
}
#content {
  height: calc(100% - 100px);
  background: grey;
  overflow: auto;
}
#footer {
  height: 50px;
  background: blue;
}

<div id="page">
  <div id="header">Header</div>
  <div id="content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="footer">Footer</div>
</div>

Answer 2

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>

是否可以在网站的特定部分添加滚动条？

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

html

css

scroll

scrollbar