Html 是否可以将内容插入到DIV中，但DIV的大小保持不变？_Html_Css

Html 是否可以将内容插入到DIV中，但DIV的大小保持不变？

html css

Html 是否可以将内容插入到DIV中，但DIV的大小保持不变？,html,css,Html,Css,我有三个DIV元素填充视口。所有三个div都有位置：绝对，左侧：0px和宽度：100% 顶部分区有高度：10%，中间分区有高度：88%，底部分区有高度：2% 例如，是否有一种方法可以将文本插入顶部DIV并使其保持在10%的高度？因为10%足够大，可以容纳文本，而不会增加DIV。。。但DIV还是在增长 HTML: 只需添加溢出：自动到div 。可编辑{ 高度：200px；宽度：500px；边框：1px实心#000；溢出：自动；保证金：20px自动； } Lorem Ipsum只是印刷和

我有三个DIV元素填充视口。所有三个div都有

位置：绝对

，

左侧：0px

和

宽度：100%

顶部分区有

高度：10%

，中间分区有

高度：88%

，底部分区有

高度：2%

例如，是否有一种方法可以将文本插入顶部DIV并使其保持在10%的高度？因为10%足够大，可以容纳文本，而不会增加DIV。。。但DIV还是在增长

HTML:

只需添加溢出：自动到

div

。可编辑{
高度：200px；
宽度：500px；
边框：1px实心#000；
溢出：自动；
保证金：20px自动；
}


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着桌面出版而流行
Aldus PageMaker等软件，包括Lorem Ipsum版本。

是，给它一些高度和溢出：自动div将保持您设置的高度，您只需设置如何处理溢出。尝试

overflow:auto

我认为您也缺少以下内容：

html，body，#bodyWrap{height:100%；}

否则div将不知道高度的百分比

<html>
<head>
    <link rel='stylesheet' href='css/style.css' />
</head>
<body>

    <div id="bodyWrap">
        <div id="header" class="box">
        a
        </div>
        <div id="mid"  class="box">
        a
        </div>
        <div id="footer"  class="box">
        a
        </div>
    </div>

</body>
</html>

@font-face{ 
    font-family: gab; 
    src: url('gabriola.ttf');
}

#bodyWrap
{
    /*If ever necessary.*/
    text-align: center;
    font-family: gab;
}

.box
{
    background-color: rgb(216, 179, 126);
    position: absolute;
    width: 100%;
    left: 0px;
}

#header
{
    height: 10%;
    top: 0px;
}

#mid
{
    height: 88%;
    top: 10%;
}

#footer
{
    height: 2%;
    bottom: 0px;
}

#header
{
    height: 10%;
    top: 0px;
    overflow-y: scroll;
}