孩子比擁有最大身高的父母大。溢出沒有效果

我想擁有一個父元素，它具有最大高度和填充此父元素的子元素。如果孩子的內容超過了父母，應該出現一個滾動條。我試圖解決這個問題是這樣的：孩子比擁有最大身高的父母大。溢出沒有效果

HTML：

<div class="parent"> 
    <div class="child"> 
     <div class="some-content"> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     abcde<br>abcde<br>abcde<br>abcde<br>abcde<br> 
     </div> 
    </div> 
</div>

CSS：

div.parent { 
    max-height: 50px; 
    width: 100px; 

    border: 1px solid black; 
} 

div.child { 
    height: 100%; 

    overflow-y: auto; 
}

不幸的是預期，這並不工作。孩子長大了父母。

請注意，設置overflow-y：auto到PARENT不是一個選項，因爲它被懷疑保存了其他不應該滾動的項目。懷疑孩子會填滿父母留下的空間。有關更多信息，請參閱實時DEMO。

Live DEMO

來源

2013-09-30 tmuecksch

將'max-height'更改爲'height'似乎有效。不知道它是不是你想要的... – LinkinTED

你必須指定子元素的高度。否則，溢出將無法工作。 – rgin

這應該解釋爲什麼它不工作：http://stackoverflow.com/questions/5657964/css-why-doesnt-percentage-height-work至於解決方案...要麼爲包含元素設置特定的高度，要麼使用JavaScript。編輯：設置包含元素的特定高度不會完全解決問題，因爲'100％'會模仿父母的確切高度。 – SombreErmine

據我所知，沒有簡單的方法用CSS來做到這一點。基本上你要求瀏覽器用可滾動元素填充剩餘空間。你可以用JavaScript做到這一點（這個例子使用jQuery的，因爲我懶）：

$('.parent').each(function(){ 
    $(this).children('.child').height($(this).height() - $(this).children('.sibling').height()+"px"); 
});

http://jsfiddle.net/BUxUe/13/

來源

2013-09-30 12:03:51 Moob

-2

檢查了這一點Fiddle

div.parent { 
    max-height: 50px; 
    width: 100px; 

    border: 1px solid black; 
    overflow:scroll; 
} 

div.child { 
    height: 100%; 
}

來源

2013-09-30 12:10:52

OP已經指定將父設置爲'overflow-y：auto'不是一個選項。 OP想要在填充剩餘可用高度的父代中有一個可滾動元素*。 – Moob

你可以嘗試使用Flexbox的。

div.parent { 
    max-height: 300px; 
    width: 200px; 
    border: 1px solid black; 
    display: flex; 
    flex-direction: column; 
} 
div.sibling { 
    border: 1px solid red; 
    flex: 0 0 auto; 
} 
div.child { 
    overflow-y: auto; 
    border: 1px solid blue; 
    flex: 0 1 auto; 
}

我不確定，如果這是一種破解。但它似乎解決了這個問題。

來源

2015-10-01 11:29:31 henning

孩子比擁有最大身高的父母大。溢出沒有效果

回答

相關問題