Question

我有3个div都占据100％的高度来创建块滚动效果。其中一个div里面有文字。问题是当我调整窗口宽度时，文本从底部开始重叠。我喜欢div高度伸展更多，不要让重叠感觉更好。代码（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

我只需要从height: 100%;删除.company，这个解决方案非常容易。

CSS - 如何在调整窗口大小时使100％高度div不与其重叠

1 个答案: