是否可以将内容插入DIV但DIV保持相同大小？

问题描述：

我有三个填充视口的DIV元素。所有三个DIV都有position: absolute,left: 0px和width: 100%。是否可以将内容插入DIV但DIV保持相同大小？

顶部DIV有height: 10%，中间DIV有height: 88%，底部DIV有height: 2%。

例如，我有没有办法让文字插入顶部的DIV，并保持在10％的高度？因为10％足够大以容纳没有DIV增长的文本...但无论如何DIV都在增长。

HTML：

<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>

CSS：

@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; 
}

是给它一些高度和溢出：汽车 –

divs将保持你设置它们的高度，你只需要设置如何处理溢出。尝试'overflow：auto'我认为你也缺少以下内容：'html，body，#bodyWrap {height：100％;}'否则div不知道什么高度是百分比 – Pete

答

只需添加overflow: auto;到div

.editable { 
 
    height: 200px; 
 
    width: 500px; 
 
    border: 1px solid #000; 
 
    overflow: auto; 
 
    margin: 20px auto; 
 
}

<div class='editable' contenteditable="true"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div>

答

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

是否可以将内容插入DIV但DIV保持相同大小？

相关推荐