Question

我是ASP.Net和CSS的新手。在我的应用程序中，我将主要分为两部分。第一部分（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中显示完整价值？

这里有什么问题？

小提琴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;    
}

Answer 2

将位置fixed更改为absolute

 #DivBody  
{
    width: 100%;
    height: 750px;
    position: absolute;
    margin-top: 155px;
    margin-bottom: 20px;
    overflow:scroll;
    top: 4px;
    left: -2px;
    margin-left: 0px;
    margin-right: 0px;
}

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

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

2 个答案: