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

我想拥有一个父元素，它具有最大高度和填充此父元素的子元素。如果孩子的内容超过了父母，应该出现一个滚动条。我试图解决这个问题是这样的：孩子比拥有最大身高的父母大。溢出没有效果

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

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

回答

相关问题