Question

HTML

<div class="InfoPanel">
    <div class="Header">Header</div>
    <div class="Content">
        START<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>C<br/>END<br/>
    </div>
</div>

CSS

.InfoPanel 
{
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
}

.Header 
{
    height:30px; line-height:30px;
    background:#c1c1c1;
}

.Content 
{
    overflow:auto; height:100%;
    background:#f1f1f1;
}

＆＃34;头＆＃34;固定高度的div正在移动＆＃34;内容＆＃34; div所以我们没有看到＆＃34; END＆＃34;串。没有js的任何解决方案？

1解决方案是使Header和Content div均为液体高度，例如10％和90％。就我而言，这是不合适的。

Answer 1

您可以使用CSS3 calc函数：

.Content 
{
    overflow:auto; 
    height: calc(100% - 30px);
    background:#f1f1f1;
}

对于较早的浏览器支持，您还应该包括：

/* Firefox */
height: -moz-calc(100% - 30px);
/* WebKit */
height: -webkit-calc(100% - 30px);
/* Opera */
height: -o-calc(100% - 30px);

Answer 2

减少height .Content以使内容可见。

<强> DEMO

.Content 
{
    overflow:auto; 
    height:96%; /* based on height of header */
    background:#f1f1f1;
    margin-bottom: 30px;
}

使其看起来更通用，以匹配所有屏幕高度：

 height : calc(100% - 30px);

Answer 3

我已更改.InfoPanel样式，如下所示。只是检查一下你是否想要这个？

.InfoPanel 
{
    height: 100%;
    overflow: hidden;
    padding-bottom:30px;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
}

Answer 4

另一方面，更改.Content css

.Content {
overflow: auto;
background: #f1f1f1;
position: absolute;
right: 0px;
bottom: 0px;
top: 30px; /* .Header's height */
left: 0px;
}

demo http://jsfiddle.net/u0398kc1/11/

2 div，固定和液体高度，绝对定位div

4 个答案: