Html 如何使用自动高度溢出进行div？_Html_Css

Html 如何使用自动高度溢出进行div？

html css

Html 如何使用自动高度溢出进行div？,html,css,Html,Css,我被卡住了。我的页面上有一个包装div，高度设置为某个值。在这个div中，我有另一个设置了高度的div（黄色的）。它下面有一个蓝色的div，它的高度会随着内容的增加而自动增加。我希望该div在内容超过所有可用高度时有一个滚动条以下是您可以使用的示例： .container{ 宽度：200px；高度：300px；填充：10px；边框：1px实心#888891； } .标题{ 高度：40px；背景色：#FEEC63；边缘底部：10px； } .身体{ 颜色：#fff；背景色：#63

我被卡住了。我的页面上有一个包装div，高度设置为某个值。在这个div中，我有另一个设置了高度的div（黄色的）。它下面有一个蓝色的div，它的高度会随着内容的增加而自动增加。我希望该div在内容超过所有可用高度时有一个滚动条

以下是您可以使用的示例：

.container{
宽度：200px；
高度：300px；
填充：10px；
边框：1px实心#888891；
}
.标题{
高度：40px；
背景色：#FEEC63；
边缘底部：10px；
}
.身体{
颜色：#fff；
背景色：#63A4FE；
溢出：隐藏；/*为什么不隐藏多余的文本*/
}


你好！
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

添加

高度：计算（100%-50px）到.body，它将工作
溢出在div.body上不起作用，因为高度不固定
为了使其适合容器的其余部分，您可以使用calc
对标题的高度加上页边距底部的10px进行子结构
来自：
为了使溢出属性生效，块
标高容器必须具有边界高度（height或
max height
）或将空白设置为nowrap

但是，当您从块格式上下文切换到flex格式上下文时，上述要求不适用，您可以保持简单：

.container{
显示器：flex；
弯曲方向：立柱；
宽度：200px；
高度：300px；
填充：10px；
边框：1px实心#888891；
}
.标题{
高度：40px；
背景色：#FEEC63；
边缘底部：10px；
}
.身体{
溢出：隐藏；/*切换到滚动条的“自动”*/
颜色：#fff；
背景色：#63A4FE；
}

你好！
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
将高度：计算（100%-50px）
添加到车身
50px=40px（割台高度）+10px（割台底部边距）

.集装箱{
宽度：200px；
高度：300px；
填充：10px；
边框：1px实心#888891；
溢出：隐藏；
}
.标题{
高度：40px；
背景色：#FEEC63；
边缘底部：10px；
}
.身体{
颜色：#fff；
背景色：#63A4FE；
高度：计算（100%-50px）；
}
你好！
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
现在在JSFIDLE中尝试过，不起作用（至少对我来说，chrome v56），看看你自己：天哪，谢谢！这花了我很多时间。我甚至认为这是不可能的
    <!DOCTYPE html>
        <html lang="en">
            <head>
                <style>
                   .container {
  width: 200px;
  height: 300px;
  padding: 10px;
  border: 1px solid #888891;
  overflow: hidden;
}

.header {
  height: 40px;
  background-color: #FEEC63;
  margin-bottom: 10px;

}

.body {
  color: #fff;
  background-color: #63A4FE;
  height: calc(100% - 50px);
}

                </style>
            </head>
            <body>
                <div class="container">
                    <div class="header">
                        Hi there!
                    </div>
                    <div class="body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </body>
        </html>