2015-12-21 95 views
0

所以即时尝试制作面板。每个面板都有一个标题和一个内容。现在我想只能在内容上滚动。滚动内部div

的CSS:

.content-div{ 
    float:left; 
    height: 400px; 
    overflow-x:hidden; 
    overflow-y:hidden; 
    white-space: nowrap; 
} 

.panel-div{ 
    height:100%; 
    background-color: red; 
    display: inline-block; 
    overflow-y:hidden; 
} 

.panel-content{ 
    padding: 5px; 
    height:100%; 
    overflow-y:auto; 
} 

.panel-header{ 
    height:100px; 
    width:400px; 
    text-align:right; 
    padding:5px; 
    background-color: blue; 
} 

和HTML:

<div class="content-div"> 
    <div class="panel-div"> 
     <div class="panel-header"> 
     </div> 
     <div class="panel-content"> 
      <p>test</p> 
     </div> 
    </div> 
</div> 

的问题是,面板内容的div获取的内容div的,全高度,我不能拿出一个很好的我如何使它100%的content-div解决方案,并从头文件中取走100像素。我知道css3中有calc,但是有没有其他方法可以做到这一点?

+0

您的标记无效 – imGaurav

+0

您的HTML似乎不完整? – Ant

+0

当我把它复制进去的时候,想一些它会丢失。现在应该修复。 https://jsfiddle.net/zwvwvrgz/这个小提琴显示我的意思。 – Nbergk

回答

0

你应该能够achiive你想要什么改变以下内容:

.content-div { 
 
    float: left; 
 
    height: 400px; 
 
    white-space: nowrap; 
 
} 
 
.panel-div { 
 
    height: 100%; 
 
    background-color: red; 
 

 
    /* add the following */ 
 
    padding-top: 100px; 
 
    box-sizing: border-box; 
 
} 
 
.panel-content { 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    padding: 5px; 
 

 
    box-sizing: border-box; /* add this*/ 
 
} 
 
.panel-header { 
 
    height: 100px; 
 
    width: 400px; 
 
    text-align: right; 
 
    padding: 5px; 
 
    background-color: blue; 
 

 
    /* add the following */ 
 
    box-sizing: border-box; 
 
    margin-top: -100px; 
 
}
<div class="content-div"> 
 
    <div class="panel-div"> 
 
    <div class="panel-header"> 
 
     <p>head</p> 
 
    </div> 
 
    <div class="panel-content"> 
 
     <div class="padded"> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     <p>test</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

但是如果你的DIV是400像素,你可以只让你.panel-content股利300像素,并把滚动对此

+0

这使得滚动部分工作。但标题不显示。我猜这是因为我已经隐藏在content-div上的溢出,它不会显示标题 – Nbergk

+0

@ user3664615,请参阅编辑。我已经添加了你的html结构 – Pete

+0

这给出了同样的问题。如果您添加足够多的测试段落以启动溢出,您将看到整个滚动条未显示,因为内容超出了div。我可以通过添加填充底部来解决这个问题:-100px;到面板的内容,但我认为它的uggly,因为你仍然不会在整个滚动条 – Nbergk