在vert scroll div周围的边框

Question

我有一个顶部div，在它下面是一个全高度的div，垂直滚动并隐藏滚动条。这有效：）

＆＃13;

＆＃13;

 #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%*/
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我希望#content下的#top_bar为全高。

我无法将边框放在#main_mask或#main_scroll上，因为一切都在右侧踩到一边，所以看起来不均匀。

当我为#content设置边框时，如果内容很少，则小于页面高度，如果我将其设为height:100%，那么当我滚动时，它会切断长页面上的内容... < / p>

Answer 1

首先确保body和html有height: 100%，然后将#main_mask高度设为calc(100% - 50px)，其中50px为高度#top_bar。同时为box-sizing: border-box提供border，此处为#content

你的意思是围绕它的边界排列#top_bar.的边缘

＆＃13;

＆＃13;

 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;
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/

＆＃13;

＆＃13;

#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;
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;