当我从多个div重叠窗口文本时，重叠到另一个div上。 我相信这可能是因为我的身高值适用于屏幕的百分比，而不是我想要的div的百分比。我现在想要的是什么（除非有人有更好的想法）而不是垂直div大小减少它保持固定，因此防止文本被推到另一个div。 我看过类似的帖子，但似乎都没有专门解决我的问题。 任何帮助将不胜感激！
编辑：我希望尽管窗口尺寸减小，div高度保持不变。
最终编辑：当我完成与计算机兼容的网站，然后努力使其与移动设备兼容时，我将处理此问题。
的jsfiddle： http://jsfiddle.net/v5aobbp3/
<div id="moreinfo" class="wrapperdiv">
<div id="topquote">
<br> <br>
<p id="quote"> “ Musical activity involves nearly every region of the brain that we know about, and nearly every neural subsystem ” </p>
<p id="quote2"> — Daniel Levitin, <em> This is Your Brain on Music, </em> p.299 </p>
</div>
<div id="benefits-main">
<div id="top-row">
<div id="leftfact">
<p class="benefits-title"> express yourself</p> <br>
<p id="bodytext"> Music is the best way for you to express yourself, unleash your creativity, and get inspired. Immerse yourself or your children in the world of music through musical education to produce an enhanced appreciation and understanding of this art </p>
</div>
<div id="centrefact">
<p class="benefits-title"> improved cognitive abilities </p> <br>
<p id="bodytext"> The auditory precision required in music study results in dramatic improvements in language abilities. Musically trained children are able to distinguish subtleties of speech, resulting in increased verbal, comprehension, reading, and communication skills. Students of music have better information processing, stronger neural connections, improved memory, and bigger brains in general.
</div>
<div id="rightfact">
<p class="benefits-title"> increased focus and academics</p>
<p id="bodytext"> Music gives its learners an increased attention span and stronger focus as well as self-discpline. Children who learn music have higher IQs and better motor coordination. Studies have found that music students significantly outperform academically compared to other students and are more motivated.
</div>
</div>
<div id="bottom-row">
<div id="leftfact2">
<p class="benefits-title"> empathy and social awareness </p> <br>
<p id="bodytext"> Musical education increases empathy in children as well as improves their emotional intelligence and interpretation of nuances of speech. Music is emotional and through this art students learn to connect with others on an emotional level. While performing with other musicians students increase their cooperation skills. </p>
</div>
<div id="centrefact2">
<p class="benefits-title"> self-confidence </p>
<p id="bodytext"> Performing as well as self-discipline give students a high level of confidence </p>
</div>
<div id="rightfact2">
<div id="button2">
<a href="https://www.rcmusic.ca/sites/default/files/files/RCM_MusicEducationBenefits.pdf" class="rcmlink"> <p class="button2text"> Learn More </p></a>
</div>
</div>
</div>
</div>
<div id="bottomquote">
<br>
<p id="musicquote" class="Einstein"> "The theory of relativity occurred to me by intuition, and music is the driving force behind this intuition. My parents had me study the violin from the time I was six. My new discovery is the result of musical perception.” </p> <br>
<p id="quote2" class="Einstein"> — Albert Einstein </p>
</div>
</div>
以及一些相关的CSS：
div #moreinfo {
background-color: #F1F1F1;
/* #d3dfed; original colour */
color: black;
height: 150%;
margin-top: 0%;
/* position: relative; */
}
#moreinfo #benefits-main {
background-color: #d3dfed;
height: 60%;
width: 100%;
}
#benefits-main #top-row { height: 50%; } #benefits-main #bottom-row { height: 50%; }
#benefits-main .benefits-title { margin-top: 2%;}
#benefits-main #leftfact { height: 100%; width: 33%; float: left; background- color: #b7cbe2; } #benefits-main #leftfact2 { height: 100%; width: 33%; float: left;
background-color: #c5d5e7; /*background-color: white;*/}
#benefits-main #centrefact { height: 100%; width: 33%; float: left; background-color: #c5d5e7; /* background-color: white;*/} #benefits-main #centrefact2 {height: 100%; width: 33%; float: left;
background-color: #b7cbe2;}
#benefits-main #rightfact { height: 100%; width: 33%; float: left; background-color: #b7cbe2; /* #e1e9f3; */} #benefits-main #rightfact2 {height: 100%; width: 33%; float: left;
background-color: #c5d5e7; /* background-color: white;*/ }
#button2 {
height: 20%;
width: 40%;
background-color: #4a79b1;
margin-top: 28%;
margin-right: auto;
margin-left: auto;
font-weight: 300;}
#button2 p {
font-family: Avenir Next, sans-serif !important;
color: #FFFFFF !important;
font-weight: 200 !important;
padding-top: 7%;
}
.button2text {
color: white;
}
a.rcmlink:link { color: #EEEEEE; } a.rcmlink:visited { color: #EEEEEE; } a.rcmlink:active {color: #EEEEEE;}
#benefits-main #bodytext {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
#moreinfo p {
margin-left: 10%;
margin-right: 10%;
color: #22384f;
font-size: 25px;
font-family: Montserrat , sans-serif;
}
div #topquote {
background-color: #d3dfed; /* #9bb7d6; */
height: 20%;
}
#topquote #quote {
/* position: absolute; /* top: 5%; */
text-align: center;
}
#topquote #quote2 {
text-align: center;
font-size: 20px;
font-family: Roboto;
bottom: 2%;
}
/* #topquote2 { background-color: #d3dfed; height: 10%; } */
div #bottomquote {
text-align: center;
height: 20%;
}
#quote2 {
font-size: 15px;
font-family: Roboto !important;
}
div #musicquote {
/* position: absolute; bottom: 2.5%; */
}
答案 0 :(得分：0)
将高度放在div上会强制文本在文本太小而无法包含文本时溢出。如果让divs高度保持自动并且用填充顶部/底部控制它们周围的间距，那么当你调整窗口大小时，它们会自动变长以适应文本。
不确定这是否真的能回答你的问题，但我不确定你在问什么？
答案 1 :(得分：0)
我已经把那一行拉成了一个精简的例子。最重要的CSS是：
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.fact {
display: table-cell;
}
html {
color: #22384F;
font-size: 12px;
font-family: sans-serif;
}
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.fact {
display: table-cell;
padding: 20px;
background-color: #B7CBE2;
}
.fact:nth-child(even) {
background-color: #C5D5E7;
}
.benefits-title {
font-size: 25px;
font-family: Montserrat , sans-serif;
margin: 0;
}<div class="row">
<div class="fact">
<p class="benefits-title"> express yourself</p> <br>
<p> Music is the best way for you to express yourself, unleash your creativity, and get inspired. Immerse yourself or your children in the world of music through musical education to produce an enhanced appreciation and understanding of this art </p>
</div>
<div class="fact">
<p class="benefits-title"> improved cognitive abilities </p> <br>
<p> The auditory precision required in music study results in dramatic improvements in language abilities. Musically trained children are able to distinguish subtleties of speech, resulting in increased verbal, comprehension, reading, and communication skills. Students of music have better information processing, stronger neural connections, improved memory, and bigger brains in general.
</p></div>
<div class="fact">
<p class="benefits-title"> increased focus and academics</p>
<p> Music gives its learners an increased attention span and stronger focus as well as self-discpline. Children who learn music have higher IQs and better motor coordination. Studies have found that music students significantly outperform academically compared to other students and are more motivated.
</p></div>
</div>
使用display: table-cell表示行中的每个div始终具有相同的高度。你想要避免分配你的HTML元素高度，除非你真的知道你在做什么：事情会很快变得混乱。
你会注意到我也改变了一些东西，删除你的ID并用类替换它们。这是有充分理由的：它可以降低选择器的特性，从长远来看，这将使维护更容易。它还允许您重复使用样式，并避免在不需要时提供唯一ID（例如#leftfact2）。
多次重复使用相同的ID也是错误的，如果您希望页面验证或者更重要的是 - 开始添加JavaScript，会导致令人头疼的问题。我建议完全避免使用ID来设置样式（这有点争议，但smarter people比我说同样的事情。）