html - 自动扩展 div 高度不起作用

Question

这是我的设计代码。问题是我有 slider ，其中我根据屏幕尺寸设置了图像尺寸。但我的问题是 slider 下方的内容在 slider 部分重叠。应该发生的是在内容应该出现的 slider 下方的任何屏幕中。如果我指定最小图像尺寸，那么当屏幕尺寸减小时，它会留下很多空白区域。

HTML 代码。

<!--slide-part-starts--><div class="slide-part">
    <!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->

<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->

CSS

.slide-part{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    min-height:100px;
    height:100%
}

.fadein {
    position:relative; 
    width:100%; 
    max-width:1600px; 
    margin:0 auto; 
    min-height:100px;
    height:100%
}

.fadein img {
    position:absolute; 
    left:0; 
    top:0; 
    height:auto; 
    max-width:100%; 
    width: auto\9;
}

.about-evio{
    width:100%;
    text-align:center;
    padding:50px 0 50px 0;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    text-align:center;
    min-height:20px;
    background:#fff;
    font-size:1.2em;
    line-height:30px
}

Answer 1

看看这个 DEMO .

您需要检查宽度/高度比例并使用特定的百分比值调整 padding-top 以便图像显示得很好。

HTML:

<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="http://placehold.it/1150x350"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="http://placehold.it/1150x350"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->

<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->

CSS:

.slide-part{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    min-height:100px;
    height:100%
}

.fadein {
    padding-top: 27%;
    position:relative; 
    width:100%; 
    max-width:1600px; 
    margin:0 auto; 
    min-height:100px;
    height:100%
}

.fadein img {
    position:absolute; 
    left:0; 
    top:0; 
    bottom:0;
    right:0;
    height:100%;
    width:100%; 
}

.about-evio{
    width:100%;
    text-align:center;
    padding:50px 0 50px 0;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    text-align:center;
    min-height:20px;
    background:#fff;
    font-size:1.2em;
    line-height:30px
}