html - vert 滚动 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>