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

Question

当我调整窗口大小时，文本从多个div重叠到另一个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上设置高度会强制文本溢出。如果你让div高度保持自动，并通过填充顶部/底部来控制它们周围的间距，那么当你调整窗口大小时，它们会自动变长以适应文本。

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

Answer 2

我已经将这一行提取到一个精简的示例中。最重要的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元素分配高度:事情很快就会变得很混乱。

您会注意到，我还做了一些更改，删除了您的I并用类替换它们。这样做有很好的理由:它保持了选择器的特异性，从长远来看，这将使事情更容易维护。它还允许您重用样式，并避免在不需要时提供唯一的It (例如#leftfact2)。

让相同的ID重复多次也是错误的，如果您希望页面进行验证，或者-更重要的是-开始添加JavaScript，这将会令人头疼。我建议完全避免使用I来设置样式(这有点争议，但是smarter people比我说同样的话)。