Css 根据内容或父元素拉伸元素

Css 根据内容或父元素拉伸元素,css,positioning,Css,Positioning,是否有一种非javascript方式可以相对于其父元素(如果内容太短)或跟随内容拉伸元素。以下是三幅图片来解释该主题: 这是一个div定位为绝对值,顶部为,底部为等,为20px 这种情况下,更多的内容“破坏”了div,这不是它应该的方式 你明白了吗?当然,不要定位:绝对的内部div <style type="text/css"> * { margin: 0; padding: 0; } #outer { b

是否有一种非javascript方式可以相对于其父元素(如果内容太短)或跟随内容拉伸元素。以下是三幅图片来解释该主题:


这是一个
div
定位为
绝对值
,顶部为
底部为
等,为20px


这种情况下,更多的内容“破坏”了
div
,这不是它应该的方式



你明白了吗?

当然,不要定位:绝对的
内部div

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    #outer {
        background: #ccc;
        padding: 20px;
        margin: 20px;
        width: 200px;
        height: 100px;
        overflow-y: auto;
    }
    #inner {
        background: white;
        border: 1px black solid;
        box-sizing: border-box;
        min-height: 100%;                
    }
</style>
<div id=outer>
    <div id=inner>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
            tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
            semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
            ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
            fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec
            non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque
            egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
            porttitor, facilisis luctus, metus</p>
    </div>
</div>

* {
保证金:0;
填充:0;
}
#外{
背景:#ccc;
填充:20px;
利润率:20px;
宽度:200px;
高度:100px;
溢出y:自动;
}
#内在的{
背景:白色;
边框:1px黑色实心;
框大小:边框框;
最小高度:100%;
}
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭
侵权人、世仇、别有用心、临时诉讼、安特。不要让欧盟自由人坐在埃吉斯塔广场上
森佩尔。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。这是我的智慧所在
乌兰科佩法雷特拉。威斯康辛州的前庭、调味品、康茂德维塔、奥纳雷西特、威斯康辛州。埃尼安
发酵液、elit eget tincidunt调味品、欧洛斯同花芸香、慈姑蛋。多尼克
turpis枕面部非enim。乌特·费利斯。帕雷森特·达皮布斯,内克·艾德·库苏斯·福西布斯,托托·内克
埃格斯塔斯·奥古斯,欧盟的统治者。阿利奎姆·埃拉特·帕特。南对峙,阿库姆桑
梅特斯卢克图斯设施门


是的,有。不要把它放在绝对位置。但这就是我实现第一个图像外观的方式——这就是我想要的。@AvL:现在看。我还添加了一个实例。的确,非常酷:刚刚添加了
边距底部:18px
#内部
就是这样。非常感谢…@AvL:如果这个答案对你有用,请确保投票/接受:)