html - 文本从一个 div 泄漏到另一个

Question

我有 2 个独立的 div，每个都有相同的“容器”类和他自己的 ID。每个 div 都包含文本 - 当我在我的计算机上运行文件时它工作正常。但是当我通过我的 iPhone 打开文件时，上层 div 中的文本泄漏到底部 div 中。恐怕这会发生在其他设备上。这是我的代码:

    <div id="about_us" class="container">
<h1>texttexttexttexttexttexttext</h1>
<p>texttexttexttexttexttexttexttexttext</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>

<div id="our_services" class="container">
<h1>text1</h1>
</div>

.container{
width: 100%;
height: 500px;
background-color: white;
}
#about_us{
text-align: center;
height: 250px;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color:gray;
}

#about_us p{
width: 55%;
margin: auto;
text-align: center;
direction: rtl;
padding-bottom: 10px;
line-height: 30px;
}
#our_services{
height: 450px;
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
}

有人知道怎么解决吗？谢谢!

Answer 1

您可以设置 overflow 属性，这里是一个使用示例:overflow: auto; -- 一旦文本变得比固定的大，这将把 div 变成一个可滚动的容器高度:

http://jsfiddle.net/Lrus8oo1/

更多关于溢出的阅读:http://css-tricks.com/the-css-overflow-property/

或-

您可以将 .container 中的 height: 500px; 更改为:min-height: 500px;设置最小高度将允许容器随着文本增长而不会溢出。

http://jsfiddle.net/Lrus8oo1/1/