CSS溢出:底部绝对定位的相对高度
CSS Overflow: relative height with bottom absolute positionning
是的,css...
上的另一个烦人的溢出问题
这是我的案例:
HTML
<div id="parent">
<div id="child1">
Some short content that may take a line or two.
</div>
<div id="child2">
Some short to very long content that may overflow parent div...
</div>
<div>
CSS
#parent {
position: absolute;
height: 100%;
width: 100px;
}
#child1 {
}
#child2 {
overflow: auto;
}
如您所见,我希望 child2 在需要时溢出父 div。但是因为我不知道 child2 的确切高度(因为 child1 可能会有所不同)我无法像我习惯使用 bottom: 0px
和 top: ???px
那样做一些绝对定位。
一些 JSFiddle 可以玩:https://jsfiddle.net/6r3ojecL/1/
在最坏的情况下我会使用一些丑陋的 JS 代码片段,但如果我能再次掌握 css 我会很高兴。 :)
谢谢!
在父级而不是子级上设置溢出(已更新)。
CSS
#parent {
position: absolute;
height: 100%;
width: 100px;
overflow: auto;
}
#child1 { }
#child2 { }
使用 display: flex
的解决方案。检查 updated fiddle
#parent {
display: flex;
position: absolute;
height: 50%;
width: 100px;
border: 1px solid red;
background-color: red;
flex-direction: column;
}
#child1 {
height: 50px;
background-color: yellow;
}
#child2 {
flex: 1;
background-color: green;
overflow: auto;
}
<div id="parent">
<div id="child1"></div>
<div id="child2">
child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content
</div>
</div>
是的,css...
上的另一个烦人的溢出问题这是我的案例:
HTML
<div id="parent">
<div id="child1">
Some short content that may take a line or two.
</div>
<div id="child2">
Some short to very long content that may overflow parent div...
</div>
<div>
CSS
#parent {
position: absolute;
height: 100%;
width: 100px;
}
#child1 {
}
#child2 {
overflow: auto;
}
如您所见,我希望 child2 在需要时溢出父 div。但是因为我不知道 child2 的确切高度(因为 child1 可能会有所不同)我无法像我习惯使用 bottom: 0px
和 top: ???px
那样做一些绝对定位。
一些 JSFiddle 可以玩:https://jsfiddle.net/6r3ojecL/1/
在最坏的情况下我会使用一些丑陋的 JS 代码片段,但如果我能再次掌握 css 我会很高兴。 :)
谢谢!
在父级而不是子级上设置溢出(已更新)。
CSS
#parent {
position: absolute;
height: 100%;
width: 100px;
overflow: auto;
}
#child1 { }
#child2 { }
使用 display: flex
的解决方案。检查 updated fiddle
#parent {
display: flex;
position: absolute;
height: 50%;
width: 100px;
border: 1px solid red;
background-color: red;
flex-direction: column;
}
#child1 {
height: 50px;
background-color: yellow;
}
#child2 {
flex: 1;
background-color: green;
overflow: auto;
}
<div id="parent">
<div id="child1"></div>
<div id="child2">
child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content
</div>
</div>