Question

css非常混乱，因为我在引导程序之上工作，但这就是正在发生的事情。我设置了100％的顶级定位（以前使用vh，但iOS不支持），但只要视口小于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（占据视口的整个宽度和高度）和旁边的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 删除后，除了边缘之外没有任何影响。

此GitHub pull request.

中的详细信息

元素“顶部”在较小的视口宽度上更改（＆lt; 835px）

1 个答案: