Question

我有一个基本页面，该页面具有标题和内容，例如，其中有一个寄存器：

<div>
    <nav>
       // header
    </nav>
    <div class="container-index">
        // form
    <div>
</div>

现在，问题是我希望窗体周围的div具有与页面底部对齐的背景图像，所以我像这样使用CSS：

html,
body {
  height: 100%;
}

.container-index {
  background: url('../images/example.jpg') #e74a39;
  background-repeat: no-repeat;
  background-position: center 100%;
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}

.contaier-index.full-height {
  height: 100vh;
}

但是当视口小于内容时，这是行不通的，而是背景图像在表单的一半处结束，所以我这样做了：

$(window).on('resize scroll', function(e){
    var docH = parseInt($(document).height()),
        viewPortH = parseInt($(window).height());

    if (docH > viewPortH) {

        $('.container-index').removeClass('full-height');
    } else {
        $('.container-index').addClass('full-height');
    }
});
$(window).trigger('resize');

这是一种非常糟糕的方法。

有没有办法在CSS中做到这一点？

Answer 1

我只需进行少量 CSS 更改即可更新您的代码，并删除 jQuery 脚本。试试这个，希望对您有所帮助。谢谢

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') #e74a39;
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: cover;
}

.container-index {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  height: calc(100vh - 18px);
}

<div>
    <nav>
       // header
    </nav>
    <div class="container-index">
        // form
    <div>
</div>

Answer 2

您可以尝试使用各种可用属性background-size：https://www.w3schools.com/cssref/css3_pr_background-size.asp。通常，背景尺寸：封面应该可以解决您的问题。

Answer 3

最后，我没有找到合理的CSS答案，因此唯一的解决方案是保留JS。

将div设置为屏幕尺寸或内容尺寸（以较大者为准）

3 个答案: