CSS HTML溢出问题与包装中的静态标头

我正在挣扎溢出内容的底部，可以在小提琴中看到。你怎么去解决这个问题，同时保持这种布局？CSS HTML溢出问题与包装中的静态标头

CSS：

.wrapper { 
    overflow-y: hidden; 
    overflow-x: hidden; 
    border: 1px solid #000; 
    height: 200px; 
    width: 200px; 
} 

.wrappedheader { 
    position: static; 
    border-bottom: 1px solid #000; 
    padding: 15px; 
} 

.wrappedbody { 
    position: relative; 
    overflow-y: auto; 
    height: 100%; 
    padding: 15px; 
}

HTML：

<div class="wrapper"> 
    <div class="wrappedheader"> 
    This is a header 
    </div> 

    <div class="wrappedbody"> 
    <!-- Content causing overflow-y --> 
    </div> 

</div>

来源

2016-07-15 SadBoi2000

挣扎在什么样的方式？你想让滚动条完全可见吗？如果是这样，答案是http://jsfiddle.net/MrLister/Sa6cb/396/ –

谢谢，这是做到了。编辑：不知道如果我理解，但为什么我们减去刚刚61px？难道没有更强大的方法可以不使用计算工作吗？ – SadBoi2000

填充物。 15px次4.另见@ feihcsim的答案。现在走吧，对不起。 –

你wrappedbody具有高度100％，这是其母公司，包装的100％。但是，包装有两个孩子，包装袋和 wrappedheader。 wrappedbody的高度应该是包装的高度减去wrappedheader的高度：

.wrappedbody { 
    position: relative; 
    overflow-y: auto; 
    height: calc(100% - 79px); /* 79 = wrappedheader height + wrappedbody padding*/ 
    padding: 15px; 
}

http://jsfiddle.net/feihcsim/14auqpqd/

来源

2016-07-15 18:41:16 feihcsim

您假定标题的行高为18px ... –

谢谢。问题是标题高度在我的问题中动态变化，所以我不知道它的高度。 – SadBoi2000

然后将高度约束从包装移动到包裹体 http://jsfiddle.net/feihcsim/14auqpqd/1/ – feihcsim

CSS HTML溢出问题与包装中的静态标头

回答

相关问题