2017-04-01 76 views
1

我有一个结构类似于模态窗口,它看起来像这样:溢出自动

.pos_container { 
 
\t \t display:block; 
 
\t \t vertical-align:top; 
 
\t \t width:70%; 
 
\t \t height:auto; 
 
\t \t margin:auto; 
 
\t \t -webkit-border-radius: 5px; 
 
\t \t -moz-border-radius: 5px; 
 
\t \t border-radius: 5px; \t 
 
\t \t border:1px solid #ddd; 
 
\t \t position:relative; 
 
\t \t top:5%; 
 
\t \t max-height:90%; 
 
\t \t overflow:hidden; 
 
\t } 
 
\t .pos_header { 
 
\t \t display:block; 
 
\t \t vertical-align:top; 
 
\t \t padding:15px 20px; 
 
\t \t background:#f7f7f7; 
 
\t \t -webkit-border-top-left-radius: 5px; 
 
\t \t -webkit-border-top-right-radius: 5px; 
 
\t \t -moz-border-radius-topleft: 5px; 
 
\t \t -moz-border-radius-topright: 5px; 
 
\t \t border-top-left-radius: 5px; 
 
\t \t border-top-right-radius: 5px; 
 
\t \t border-bottom:1px solid #ddd; 
 
\t \t 
 
\t } 
 
\t .pos_body { 
 
\t \t display:block; 
 
\t \t vertical-align:top; 
 
\t \t padding:10px 20px; 
 
\t \t background:#fff; 
 
\t \t overflow-y:auto; 
 
\t \t height:100%; 
 
\t }
\t <div class="pos_container"> 
 
\t \t <div class="pos_header"> 
 
\t \t \t // SOME CONTENT HERE, ALWAYS HAS FIXED HEIGHT 
 
\t \t </div> 
 
\t \t <div class="pos_body"> 
 
\t \t \t // CONTENT IN HERE CAN BE VARIOUS HEIGHT, NEED AUTO-SCROLL 
 
\t \t </div> 
 
\t </div>

我在网上搜索,始终有一个规则,设置.pos_body到一定高度的高度,但我需要它适合的.pos_container可见部分,并在.pos_body情况下,内容重叠.pos_container然后滚动出现

+0

你就不能使用溢出:滚动? –

+0

@TheInterloper在这种情况下,我有滚动条,但'.pos_body'的内容不可滚动 –

回答

1

尝试用柔性容器

.pos_container { 
 
\t \t vertical-align:top; 
 
\t \t width:70%; 
 
\t \t height:auto; 
 
\t \t margin:auto; 
 
\t \t -webkit-border-radius: 5px; 
 
\t \t -moz-border-radius: 5px; 
 
\t \t border-radius: 5px; \t 
 
\t \t border:1px solid #ddd; 
 
\t \t position:relative; 
 
\t \t top:5%; 
 
\t \t max-height:100px; 
 
\t \t overflow:hidden; 
 
    display: flex; 
 
    flex-direction: column; 
 
\t } 
 
\t .pos_header { 
 
\t \t display:block; 
 
\t \t vertical-align:top; 
 
\t \t padding:15px 20px; 
 
\t \t background:#f7f7f7; 
 
\t \t -webkit-border-top-left-radius: 5px; 
 
\t \t -webkit-border-top-right-radius: 5px; 
 
\t \t -moz-border-radius-topleft: 5px; 
 
\t \t -moz-border-radius-topright: 5px; 
 
\t \t border-top-left-radius: 5px; 
 
\t \t border-top-right-radius: 5px; 
 
\t \t border-bottom:1px solid #ddd; 
 
\t \t 
 
\t } 
 
\t .pos_body { 
 
\t \t vertical-align:top; 
 
\t \t padding:10px 20px; 
 
\t \t background:#fff; 
 
\t \t overflow-y:auto; 
 
\t }
<div class="pos_container"> 
 
\t \t <div class="pos_header"> 
 
\t \t \t // SOME CONTENT HERE, ALWAYS HAS FIXED HEIGHT 
 
\t \t </div> 
 
\t \t <div class="pos_body"> 
 
\t \t \t // CONTENT IN HERE CAN BE VARIOUS HEIGHT, 
 
     fewfew few<br> 
 
     fe<br> 
 
     fwef<br> 
 
     fwefeweNEED AUTO-SCROLL 
 
\t \t </div> 
 
\t </div>

+0

像一个魅力工作!辉煌!! –