【发布时间】：2016-04-08 13:25:44
【问题描述】：
我正在引导程序中创建提要页面。左侧部分是提要列表，右侧部分是提要详细信息区域。我已经修复了提要详细信息部分，因此当向下滚动列表时，提要详细信息始终显示在右侧。
Feed 详细信息部分由以下部分组成：
1。 Feed 详细信息：calc(100% - 80px)
2。评论：计算（100% - 80px）
3。发表评论（高度：80px）
问题是上面的“1”和“2”是手风琴的两个标签。我希望其中至少有一个在任何给定时间开放。到此为止。
如果内容很小，比如没有 cmets，我希望 cmets 部分占用所有可用空间。但是如果内容太多我将内容溢出设置为滑块。
在我的特殊情况下，如果窗口在 Firefox 中最大化，如果我将面板主体“1”设置为 min-height:390px；和最大高度：390px；一切顺利，当然，随着窗口大小的不同，手风琴开始与下面的表格合并。
代码如下：
<!-- right section : Feed Details -->
<div class="col-md-5">
<div id="feed-detail">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="icon ion-android-list"></i>
Feed Details
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4>Waqar Younis steps down as Pakistan coach</h4>
<p>Description of the feed if any. consectetur adipisicing elit. Neque aut amet, alias consectetur voluptatibus aliquid dicta deleniti cupiditate! Officiis nulla, rem nobis sequi cupiditate incidunt magni itaque repudiandae quidem autem quisquam corporis, quod, enim perspiciatis.</p>
<ul class="list-inline">
<li><i class="icon ion-eye"></i> Seen by: <strong><a href="#">6</a></strong></li>
<li><i class="icon ion-android-share"></i> Shared with: <strong><a href="#">All Groups</a></strong></li>
</ul>
<ul class="list-inline feed-gallery">
<li><a href="#"><img src="images/waqar-1.jpg" class="img-thumbnail"></a></li>
<li><a href="#"><img src="images/waqar-2.jpg" class="img-thumbnail"></a></li>
<li><a href="#"><img src="images/waqar-3.jpg" class="img-thumbnail"></a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="icon ion-android-textsms"></i>
View all 34 comments
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body" id="feed-comments">
<div class="media">
<div class="media-left pull-left">
<a href="#">
<img class="media-object" src="images/avatar-mini-2.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4>Julia Roberts
<span class="pull-right">2 min ago</span>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti numquam vel totam! Autem porro culpa alias dolorem tempore deserunt sed earum, minus labore nemo ea!</p>
</div>
</div>
<div class="media">
<div class="media-left pull-left">
<a href="#">
<img class="media-object" src="images/avatar-mini.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4>Frank Allen
<span class="pull-right">2 min ago</span>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti numquam vel totam! Autem porro culpa alias dolorem tempore deserunt sed earum, minus labore nemo ea!</p>
</div>
</div>
<div class="media">
<div class="media-left pull-left">
<a href="#">
<img class="media-object" src="images/avatar-mini-4.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4>Mark Henry
<span class="pull-right">2 min ago</span>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti numquam vel totam! Autem porro culpa alias dolorem tempore deserunt sed earum, minus labore nemo ea!</p>
</div>
</div>
<div class="media">
<div class="media-left pull-left">
<a href="#">
<img class="media-object" src="images/avatar-mini-3.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4>Cathy Pacific
<span class="pull-right">2 min ago</span>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti numquam vel totam! Autem porro culpa alias dolorem tempore deserunt sed earum, minus labore nemo ea!</p>
</div>
</div>
<div class="media">
<div class="media-left pull-left">
<a href="#">
<img class="media-object" src="images/avatar-mini-4.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4>Samatha Auguelera
<span class="pull-right">2 min ago</span>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti numquam vel totam! Autem porro culpa alias dolorem tempore deserunt sed earum, minus labore nemo ea!</p>
</div>
</div>
<div class="media">
<div class="media-left pull-left">
<a href="#">
<img class="media-object" src="images/avatar-mini.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4>George Cloony
<span class="pull-right">2 min ago</span>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti numquam vel totam! Autem porro culpa alias dolorem tempore deserunt sed earum, minus labore nemo ea!</p>
</div>
</div>
<div class="media">
<div class="media-left pull-left">
<a href="#">
<img class="media-object" src="images/avatar-mini-2.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4>Brad Pittsburg
<span class="pull-right">2 min ago</span>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti numquam vel totam! Autem porro culpa alias dolorem tempore deserunt sed earum, minus labore nemo ea!</p>
</div>
</div>
<div class="media">
<div class="media-left pull-left">
<a href="#">
<img class="media-object" src="images/avatar-mini.jpg" alt="...">
</a>
</div>
<div class="media-body">
<h4>Hammad
<span class="pull-right">2 min ago</span>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti numquam vel totam! Autem porro culpa alias dolorem tempore deserunt sed earum, minus labore nemo ea!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 comment-control" style="">
<div class="input-group">
<input type="text" class="form-control" placeholder="Post your comment">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Post!</button>
</span>
</div><!-- /input-group -->
</div>
</div>
</div>
这是 CSS：
<style>
#feed-detail{
width: 420px; height: calc(100% - 100px);position: fixed;background: #333;
}
#feed-detail .panel-body h4{font-weight: 700;font-size: 18px; color: #666; font-family: 'Montserrat', sans-serif; margin-top: 0;}
.form-control:focus, #focusedInput {border: none;}
.comment-control {position:absolute; bottom:0; padding:3px;}
.comment-control input[type=text]{ height:auto; line-height: 30px;}
.comment-control button{ padding: 11px; background: #f8f8f8; border-radius: 0;border: none;}
.comment-control button:hover{background: #f6f6f6; color:#333; border: none;}
.comment-control input[type="text"]::-webkit-input-placeholder, .comment-control input[type="text"]:-moz-placeholder, .comment-control input[type="text"]::-moz-placeholder, .comment-control input[type="text"]:-ms-input-placeholder
{ color: #ccc; }
#feed-detail .panel{background: #eee; border-radius: 0 !important;}
#feed-detail .panel .panel-heading{background: none; border-radius: 0 !important;}
#feed-detail .panel .panel-heading:hover{background: rgba(0,0,0,0.05);
border-radius: 0 !important;}
/*--------- Here i need the calc(100%-80px) in working order ---------*/
#feed-detail .panel-body{
min-height: 390px;
max-height: 390px;
overflow-y: scroll;
}
#feed-detail .panel-body li{margin-right: 20px;}
#feed-comments .media-body h4{font-size: 14px; margin: 0; margin-bottom: 10px;}
#feed-comments .media-body h4 span{font-size: 12px; font-weight: 400;}
#feed-detail ul.feed-gallery li img{height: 80px; width: auto; border-radius: 0; background-color: #eee;}
#feed-detail ul.feed-gallery li img:hover{background-color: #fff;}
#feed-detail ul.feed-gallery li {margin: 0 2px 2px 0; padding:0;}
#feed-detail i {font-size: 1em; margin-right: 5px;vertical-align: middle;line-height: 6px;}
.people-options .bootstrap-select{margin-bottom: 0 !important;}
</style>
我尝试了每一种组合，感觉就像撞到了一堵砖墙。任何帮助将不胜感激。提前致谢。
伊姆兰
【问题讨论】：
标签： html twitter-bootstrap accordion calc