垂直滚动 div 周围的边框

Question

我有一个顶部div，在它下面有一个全高和垂直滚动的div，滚动条隐藏。这适用于:)

 #top_bar {
     width: 100%;
     height: 50px;
 }
 #main_mask {
     width: 60%;
     height: 100%;
     overflow: hidden;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 #main_scroll {
     width: 100%;
     height: 100%;
     overflow-y: scroll;
     padding-right: 17px;
     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
 }
 #content {
     /*height: 100%*/
 }

<div id="top_bar">
   Top bar
</div>
<div id="main_mask">
   <div id="main_scroll">
      <div id="content">
         This is some variable content
      </div>
   </div>
</div>

我想#content在#top_bar以下全高.

我不能把边框放在#main_mask或#main_scroll上，因为一切都在右侧，所以看起来不均匀。

当我为#content放置边框时，当内容很少时，它小于页面高度，如果我把它height:100%，那么当我滚动时它会砍掉长页面上的内容......

Answer 1

首先确保body和html有height: 100%，然后将#main_mask高度设为calc(100% - 50px)，其中50px是#top_bar的高度。也给box-sizing: border-box你给的border，这里#content

你说的边框在它周围的边界排列#top_bar.的边缘是什么意思

 body, html {
     height: 100%;
     margin: 0;
     padding: 0;
 }
 #top_bar {
     width: 60%;
     height: 50px;
 }
 #main_mask {
     width: 60%;
     height: calc(100% - 50px);
     overflow: hidden;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 #main_scroll {
     width: 100%;
     height: 100%;
     overflow-y: scroll;
     padding-right: 17px;
     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
 }
 #content {
     min-height: 100%;
     overflow: auto;
     border: 1px solid;
     box-sizing: border-box;
 }

<div id="top_bar">
   Top bar
</div>
<div id="main_mask">
   <div id="main_scroll">
      <div id="content">
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
         This is some variable content
      </div>
   </div>
</div>

Answer 2

我认为这可能会有所帮助。

#content {
padding: 5px 10%;
border: 1px solid #999;
text-align:center;
height: 100%
}

这是jsfiddle https://jsfiddle.net/vqpL0w5n/1/

Answer 3

你期待这样的输出吗？

https://jsfiddle.net/gk3azmLj/1/

#top_bar {
     width: 60%;
     height: 50px;
     margin:auto;
     background:wheat;
     border:1px solid blue;
 }
 #main_mask {
     width: 60%;
     overflow: hidden;
     display: block;
     margin:auto;
 }
 #main_scroll {
     width: 100%;
     overflow-y: scroll;
     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
 }
 #content {
     height: 100vh;
     width:100%;
     background:white;
 }
  ::-webkit-scrollbar {
  width: 0px;  /* remove scrollbar space */
  background: transparent; 
 }
 ::-webkit-scrollbar-thumb {
 background: #FF0000;
 }

<div id="top_bar">
   Top bar
</div>
<div id="main_mask">
   <div id="main_scroll">
      <div id="content">
         This is some variable content
      </div>
   </div>
</div>