I have three divs all set to 100% height in order to create a block scroll effect. One of these divs contains text. The issue arises when I resize the window width and the text starts to overlap from the bottom. I want the div height to stretch further to prevent this overlapping from happening. HTML Code:
<div class="wrapper">
<div class="company" id="company">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/dev/images/example.png" alt="First Slide">
<div class="carousel-caption">
<h3>Caption title 1</h3>
<p>Caption text 1</p>
</div>
</div>
<div class="item">
<img src="/dev/images/example.png" alt="Second Slide">
<div class="carousel-caption">
<h3>Caption title 2</h3>
<p>Caption text 2</p>
</div>
</div>
<div class="item">
<img src="/dev/images/example.png" alt="Third Slide">
<div class="carousel-caption">
<h3>Caption title 3</h3>
<p>Caption text 3</p>
</div>
</div>
</div>
<a class="carousel-control left" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="container-fluid">
<h1>Dynavio</h1>
<p>Dynavio is a company that specializes in automation</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla dignissim ex. Curabitur eu purus non turpis consequat gravida et ut velit. Praesent semper orci est, vel rutrum enim laoreet sed. Donec commodo velit in elit viverra aliquam. Mauris accumsan lorem ante, ut elementum massa vestibulum vitae. Quisque faucibus, lorem quis vulputate tincidunt, sapien mi volutpat dui, nec interdum nisl elit ut turpis. Integer consectetur dui volutpat justo volutpat, ut rhoncus arcu accumsan. Sed aliquet venenatis felis, vitae feugiat nibh venenatis vel. Sed id dui quis odio suscipit rutrum at vel velit.</p>
<h1>Members</h1>
<img src="/dev/images/olanigan.jpg" data-toggle="tooltip" data-placement="top" title="Ibrahim Olanigan" class="img-circle member-image cursor-pointer">
</div>
</div>
</div>
CSS Code:
.wrapper {
border-bottom: 1px solid #D9D9D9;
min-height: 100%;
}
.company {
padding-bottom: 10px;
height: 100%;
}
JSFiddle Link: https://jsfiddle.net/r90sdk6g/