html - 滚动条未完全显示 Div 中的值

Question

我是 ASP.Net 和 CSS 的新手。在我的应用程序中，我将主 div 分成两部分。第一部分 (DivHeader) 已修复。第二部分有更多文本，因此滚动条不显示全文。

我试过:(样本)

CSS

html,body
{
width:100%;
height:100%;
padding:0px;
margin:0px;
font-family: Trebuchet MS;
}

#DivMain
{
width:100%;
height:100%;
overflow:auto;
position:relative;
}
html,body
{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
#DivMain
{
    width: 100%;
    height: 100%;
    overflow:auto;
    position:relative;
 }
#DivHeader
{
    width: 100%;
    height: 155px;
    top: 0px;
    left: 0px;
    position:fixed ;
    z-index: 2;
    border-bottom: 1px solid #00e5e6;
}
#DivBody  
{
    width: 100%;
    height: 750px;
    position: fixed;
    margin-top: 155px;
    margin-bottom: 20px;
    overflow:scroll;
    top: 4px;
    left: -2px;
    margin-left: 0px;
    margin-right: 0px;
}

ASP.Net

<div id="DivMain">
       <div id="DivHeader">
       </div>
       <div id="DivBody">
       <p>
       <br>fdf</br>
       sdf
       sd
       fas
       df
       asdf
       asd
       fas
       df
       asdf
       asd
       fd
       asf
       das
       fds
       f
       dasf
       das
       fdas
       f
         <br>fdf</br>  <br>fdf</br>
           <br>fdf</br>
             <br>fdf</br>
               <br>fdf</br>  <br>fdf</br>  <br>fdf</br>
                 <br>fdf</br>  <br>fdf</br>  <br>fdf</br>  <br>fdf</br>  <br>fdf</br>  <br>fdf</br>  <br>fdf</br>  <br>fdf</br>  <br>fdf</br>  <br>fdf</br>  <br>fdf</br>  <br>fdf</br>
       </p>
        </div>
        </div>

如何在Div中展现全部值(value)？

这里做错了什么？

fiddle https://jsfiddle.net/8yLeb2xL/

Answer 1

答案在这里

Demo

html,body
{
   width:100%;
   height:100%;
   padding:0px;
   margin:0px;
   font-family: Trebuchet MS;
}
#DivMain
{
   width:100%;
   height:100%;
   position:relative;
}
#DivHeader
{
   width: 100%;
   height: 120px; 
   border-bottom:1px solid gray;
}
#DivBody  
{
   width: 100%;
   height:calc(100% - 121px);
}
#DivBodyChild {
   height:100%;
   overflow-y:scroll;    
}