css - 元素 "top"在较小的视口(viewport)宽度(<835 像素)上发生变化

Question

CSS 真的很乱，因为我在 bootstrap 之上工作，但这就是正在发生的事情。我将顶部定位设置为 100%(之前使用 vh，但 iOS 不支持)但是每当视口(viewport)小于 835px 时，它就会崩溃。也许不会崩溃，但行为不同。 100% 不是初始高度的 100%，而是标题高度的 100%。可以查看本站here (不是实际域，我只是将其用于开发)。

/*

3. - Homepage

*/

/* 3.1 - Slider */
#slider,
#slider .carousel-inner,
#slider .carousel-inner .item {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
#slider {
z-index: -1;
}
#slider ol.carousel-indicators {
display: block;
bottom: 20px;
}
#slider .carousel-inner .item .carousel-caption {
bottom: 20px;
right: 0;
left: 50px;
padding: 0px;
bottom: 20px;
left: 50px;
text-align: left;
display: block;
width: 350px;
}
#slider .carousel-inner .item .carousel-caption h3 {
color: rgb(255, 255, 255);
}
#slider .carousel-inner .item img {
position: absolute;
min-width: 100%;
top: 10%;
left: 10%;
}
#slider .carousel-inner .item img:empty {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
#content-wrapper {
    position: absolute;
    top: 100%;
}

这是旋转木马的 html(它占据了视口(viewport)的全部宽度和高度)和它旁边的 div。

<section id="slider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0" class="active"></li>
        <li data-target="#slider" data-slide-to="1"></li>
        <li data-target="#slider" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="/images/slides/slide-1.jpg" alt="Subasta de Joyer&iacute;a">
            <div class="carousel-caption">
                <h3>Subasta de Joyer&iacute;a</h3>
                <p>Relojes y Mobiliario Europeo <br><a href="#">Ver Evento -></a></p>
            </div>
        </div>
        <div class="item">
            <img src="/images/slides/slide-2.jpg" alt="Subasta de Vinos">
            <div class="carousel-caption">
                <h3>Subasta de Vinos</h3>
                <p>de Colecci&oacute;n, uso Diario y Destilados <br><a href="#">Ver Evento -></a></p>
            </div>
        </div>
        <div class="item">
            <img src="/images/slides/slide-3.jpg" alt="Subasta de Grabados">
            <div class="carousel-caption">
                <h3>Subasta de Grabados</h3>
                <p>Fotograf&iacute;a, Documentos Escritos y Manuscritos, Mapas, Libros Antig&uuml;os y Contempor&aacute;neos <br>(Incluye 12 Lotes de la Biblioteca Ecl&eacute;tica MONCLAU) <a href="#">Ver Evento -></a></p>
            </div>
        </div>
    </div>
</section>

<div id="content-wrapper">

Answer 1

复制/粘贴的代码存在问题。正文设置为相对最大宽度:835px 删除它后，除了 margin 之外没有任何影响。

详情请见 GitHub pull request.