我希望div类content始终可见，无论所有屏幕上div类banner-text-container的高度如何。 banner-text-container内部有动态内容，因此其高度不固定。要求是那些蓝色框是img-banner-container div的一半而内容div的一半。有没有办法通过css或js处理它？</ p>
h1,
h2 {
text-align: center;
}
.img-banner-container {
position: relative;
color: #ffffff!important;
/*margin-bottom: 200px;*/
background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://www.lanlinglaurel.com/data/out/162/5403600-wallpaper-hd.jpeg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/*height: auto;*/
width: 100%;
height: 1000px;
}
.banner-text-container {
position: absolute;
top: 40%;
z-index: 10;
}
.banner-text-content {
padding: 0 20%;
margin-bottom: 30px;
}
/*.content-with-nav-boxes {*/
/*background-color: white;*/
/*position: relative;*/
/*padding: 0 10%;*/
/*margin-bottom: 50px;*/
/*height: 500px;*/
/*width: 100%;*/
/*overflow-x: hidden;*/
/*}*/
.small-nav-boxes {
/*padding: 0 10%;*/
/*clear: both;*/
width: 100%;
}
.small-nav-boxes .single-nav-box {
text-align: center;
color: white;
width: 33.33%!important;
float: left!important;
}
.single-nav-box {
padding: 10px 0;
cursor: pointer;
height: 300px;
overflow: hidden;
background-color: #0091CF;
}
.content {
background-color: #4C4145;
color: white;
}
@media screen and (max-width: 1024px) {
.small-nav-boxes .single-nav-box {
width: 100%!important;
float: none!important;
}
}<div class="img-banner-container">
<div class="banner-text-container">
<h1 class="banner-text-title">
Lorem Ipsum
</h1>
<div class="banner-text-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus leo, blandit sit amet hendrerit non, lobortis id arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tempor eu urna vitae aliquam. Donec convallis
ullamcorper massa. Nam interdum pulvinar libero, a lobortis nunc congue eu. Vestibulum vel elit et metus feugiat faucibus. Ut aliquet dui leo, quis imperdiet quam tincidunt sit amet. Etiam sed nibh efficitur, tincidunt justo a, dapibus dui. In quam
ipsum, dapibus id convallis vulputate, porttitor et erat. Vivamus eget tellus sit amet nulla aliquet pharetra. Cras sed lorem euismod, maximus urna non, condimentum lacus. Nullam eleifend nunc eget magna ultrices eleifend.
<br/> Aliquam vel porta quam. Sed a blandit purus. Proin non magna in enim aliquam mollis. Quisque lacus ex, ultrices id nulla scelerisque, suscipit congue risus. Mauris tincidunt gravida semper. Fusce a consectetur lorem. Praesent molestie consequat
leo, vel egestas mi mollis eu. Quisque non pharetra orci, vitae dapibus sem. Sed pharetra facilisis interdum. Aenean a posuere lorem, et bibendum augue. Vestibulum quis auctor tortor. Suspendisse porta facilisis erat et dignissim. Nulla commodo
enim tellus, eget vestibulum felis bibendum vel. In semper erat id lacus venenatis tincidunt. Sed a nulla quis leo porttitor porta.
<br/> Proin erat ipsum, vestibulum ac lacus a, luctus gravida arcu. Curabitur tincidunt varius finibus. Suspendisse at nibh erat. Sed in lobortis mi, in lobortis felis. Phasellus tincidunt tincidunt porta. Nulla non ipsum ullamcorper, egestas dui
in, rhoncus orci. Nulla malesuada mauris nec nibh porta facilisis. Etiam finibus purus non ex accumsan, accumsan lacinia lectus rutrum. Etiam molestie neque id lectus condimentum ullamcorper. Quisque nunc nisl, venenatis vel diam vitae, facilisis
pharetra massa. Curabitur fringilla mollis vulputate. Donec fermentum lorem felis.
<br/>
</div>
<div class="small-nav-boxes">
<div class="single-nav-box">
<p>What is Lorem Ipsum?</p>
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>
<div class="single-nav-box">
<p>Why do we use it?</p>
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>
<div class="single-nav-box">
<p>What is Lorem Ipsum?</p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>
<div class="content">
<h2>Where does it come from?</h2>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham.
</div>
答案 0 :(得分：0)
你的问题有点模糊，但我直接查看你的代码我理解的更多。
在我看来，你在不需要的地方使用绝对定位，并且在你几乎从不使用它们的时候也使用了太多！重要的声明。
我修改了您的代码以保留＆＃34;内容＆＃34;阻止在任何时候出现。如果它上面的内容由于动态生成的内容而改变其大小，那么它应该自然增长并遵循页面的流程。无需设定高度或使用绝对定位。
以下是您修改的CSS：https://jsfiddle.net/ronaldpoi/e434hy5w/
编辑：有关所需结果的更多信息，我更新了代码。在这种情况下，您必须使用绝对定位来控制元素。您还需要添加html标记以使其成为可能。我在Jsfiddle中更新了我的代码。
以下是第二次修改：https://jsfiddle.net/ronaldpoi/e434hy5w/1/
* {
box-sizing: border-box;
}
h1,
h2 {
text-align: center;
}
.img-banner-container {
color: #fff;
background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://www.lanlinglaurel.com/data/out/162/5403600-wallpaper-hd.jpeg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding-bottom: 180px;
}
.banner-text-container {
padding: 20px;
max-width: 960px;
margin: 0 auto;
}
.small-nav-boxes-container {
position: relative;
height: 0;
}
.small-nav-boxes {
max-width: 960px;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -480px;
transform: translateY(-50%);
}
.single-nav-box {
text-align: center;
width: 33%;
background-color: #0091CF;
overflow: hidden;
display: inline-block;
padding: 20px;
}
.content {
background-color: #4C4145;
color: #fff;
padding-top: 180px;
}