Question

我远离CSS向导，需要一些关于如何执行以下操作的帮助/建议。

我使用Bootstrap进行响应式布局，需要2行布局。第一行中有3列，第二行中有一列。

前三列将有一个图像，第二行是一个水平滚动图像轮播。

第二行（轮播）将隐藏在窗口事件上。当发生这种情况时，我们希望图像调整大小并将屏幕填充100％的高度。

其他标准是高度始终为100％，并且永远不应有溢出或滚动条。

我已经做了很多搜索示例或类似问题，并且主要发现如何使用nav / header +较低内容div填充到100％高度，但是没有看到这种情况。

我实际上有这个工作，但我觉得它有点笨重（参见JSFiddle）。

那么问题，有没有办法做我已经做过的事情，但是我已经在演示中完成了纯粹的CSS而不是JavaScript的图像高度调整，我们修改了元素样式？感谢时间。

JSFiddle Demo

<div class='container'>
  <div id='row1'>
    <div>content 1</div>
    <div>content 2</div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" />
  </div>
  <div id='row2'>Hide this with JS and image should get big</div>
</div>
<div style='background-color:red; position:absolute; bottom:0;'>
  <input type='button'>
</div>

body{
    height:250px;
}
.container {
    height: 100%;
    background-color:blue;
}
#row1 {
    height:95%;
    max-height:100%;
}
#row1 div {
    float:left;
}
#row1.max {
    height:100%;
    max-height:100%;
}
#row1 img {
    height:inherit;
    max-height:inherit;
}
#row2 {
    height:auto;
    background-color:yellow;
}
.hide {
    position:absolute;
    top:-9999px;
    left:-9999px;
}

$('input').on('click', function () {
    var r1 = $("#row1");
    var r2 = $("#row2");
    if (r2.hasClass("hide")) 
    {
        r2.removeClass("hide");
        r1.removeClass("max");
    }
    else 
    {
        r2.addClass("hide");
        r1.addClass("max");
    }

    $("input").attr('value', $("#row1").height());
});

Answer 1

那么你可以使用toggleClass，所以你看起来像这样：

$('input').on('click', function () {   
    $('#row1').toggleClass('max');
    $('#row2').toggleClass('hide');

    $('input').attr('value', $('#row1').height());
});

示例：JSFiddle

隐藏页脚时，响应式图像调整为100％高度的CSS问题

1 个答案: