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溢出問題與包裝中的靜態標頭

回答

相關問題