html - 尽管调整了窗口大小，但仍保持 div 高度不变

Question

当我调整窗口大小时，多个 div 中的文本重叠到另一个上。 我相信这可能是因为我的高度值适用于屏幕的百分比，而不是我想要的 div 的百分比。我现在想要的(除非有人有更好的主意)不是减少垂直 div 的大小，而是让它保持固定，从而防止文本被推到另一个 div 上。 我看过类似的帖子，但似乎没有一篇专门针对我的问题。 任何帮助将不胜感激!

编辑:尽管减小了窗口大小，但我希望 div 高度保持不变。

最终编辑:我将在完成我的计算机兼容网站然后努力使其与移动设备兼容时处理这个问题。

JsFiddle: http://jsfiddle.net/v5aobbp3/

<div id="moreinfo" class="wrapperdiv">
        <div id="topquote">
            <br> <br>
            <p id="quote"> &ldquo;  Musical activity involves nearly every region of the brain that we know about, and nearly every neural subsystem &rdquo; </p> 
            <p id="quote2"> &mdash; 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"> &mdash; 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%; */
}

Answer 1

在 div 上设置高度会强制文本溢出，一旦它们太小而无法包含文本。如果您让 div 高度保持自动并使用填充顶部/底部控制它们周围的间距，那么当您调整窗口大小时它们会自动变长以适合文本。

不确定这是否真的回答了您的问题，但我也不确定您在问什么？