html - CSS - 如何在调整窗口大小时使 100% 高度的 div 不与其内容重叠

Question

我有 3 个 div 都采用 100% 高度来创建 block 滚动效果。其中一个 div 里面有文本。问题是当我调整窗口宽度时，文本开始从底部重叠。我希望 div 高度能够拉伸(stretch)得更多，以免发生重叠。 代码(HTML):

<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>   
            <!-- Wrapper for carousel items -->
            <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>
            <!-- Carousel controls -->
            <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, which 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):

.wrapper {
    border-bottom: 1px solid #D9D9D9;
    min-height: 100%;
}
.company {
    padding-bottom: 10px;
    height: 100%;
}

JSFiddle:https://jsfiddle.net/r90sdk6g/

Answer 1

解决方案非常简单，我只需要从 .company 中删除 height: 100%; 即可。