Question

我的标题高度等于窗口的高度。这使得标题的子节点处于相同的位置，尽管标题的高度未定义。我想把一个特定的孩子放在标题的底部，不管它的高度如何。实际上，div将位于屏幕的底部，直到向下滚动。是否有一些简洁的jquery解决方案？

＆＃13;

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('header').css('min-height', windowHeight);
    };
    setHeight();

    $(window).resize(function() {
      setHeight();
    });
});

＆＃13;

header {background-color:black; width:100%;}
#top {background-color:blue;}
#center {padding:1em; background-color:red;}
#bottom {background-color:green;}

＆＃13;

<header>
<div id="top">top</div>
<div id="center">center</div>
<div id="bottom">bottom</div>
</header>

＆＃13;

Answer 1

我不知道为什么你有一个高度等于窗口高度的标题标签。但是为了帮助您提出问题，

我给你一个没有js就可以使用的解决方案。

将body和html标签高度设置为100％。

body, html {
    height:100%;
}

header {
    min-height: 100%;
}

#bottom {
    position: absolute;
    bottom: 0;
}

这是你在找什么？

Answer 2

你根本不需要JS或jQuery。这是另一个解决方案：

header {
    height: 100vh;
}

这意味着100％的观看者身高。它在CSS中是一个很好的单位。

在窗口内部高度底部对齐div

2 个答案: