ポジション絶対以下のコンテンツ

Question

divクラスbanner-text-containerの高さに関係なくdivクラスcontentが常に表示されるようにします。 banner-text-containerは動的コンテンツを内部に持っていて、その高さは固定されていません。要件は、青色のボックスがimg-banner-containerのdivの半分であり、コンテンツのdivの半分であることです。 cssまたはjsで対処する方法はありますか？

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>

Answer 1

あなたの質問は少しあいまいですが、私は直接あなたのコードを見てから、より多くのを理解していました。

絶対的な位置付けを必要としない場所で使用しているように見えますが、あまり使用しないと重要な宣言を使用しているようです。

「コンテンツ」ブロックが常に存在するようにコードを修正しました。それより上のコンテンツが動的に生成されるコンテンツのためにサイズを変更する場合、それは自然に成長し、ページの流れに従うべきです。高さを設定するか、または絶対配置を使用する必要はありません。ここで

を変更、あなたのCSSです：https://jsfiddle.net/ronaldpoi/e434hy5w/

EDIT：望ましい結果に関するより多くの情報を、私は、コードを更新しました。このシナリオでは、絶対配置を使用して要素を制御する必要があります。また、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; 
 
}