javascript - 元素的高度是视口(viewport)的左边

Question

我应该如何将 div 的高度设置为视口(viewport)从开始位置开始减去 20 像素的高度？父级 DIV 是视口(viewport)的 100%，我需要子级展开直到父级结束。

父div的jquery:

$(document).ready(function(){
  windowHeight = $(window).height() - 0;
  $('.slide').css('min-height', windowHeight);
});

Answer 1

如果我对你的问题的理解正确，你有一个 100% 高度的父 div，在它里面你有 20px 高的东西，然后应该延伸到底部的东西？ (请在您的问题中说清楚，或者包括一个代码示例作为 jsfiddle 和/或屏幕截图)。

看看这个简单的例子

<div class="wrapper">
    <div class="header"> 
        Heading 
    </div>
    <div class="strecth">
        Stretching content
    </div>
</div>

实现我认为你的意思的样式:

.wrapper {
    height: 100%;
}
.header {
    height: 20px;
}
.stretch {
    height: 100%;
    padding-top: 20px;
    margin-top: -20px;
}

20px 的内边距被渲染为 100% 的一部分，所以实际上你的 .stretch 的内容将是 100% - 20px 高(这是你想要的)，但是有一个将其向下推的 20px(填充)的偏移量。然后我使用负边距通过将 div 拉回 20px 来撤消偏移。效果是可见内容恰好是 100% - 20px 的高度，这正是您想要的。

查看实时代码(我添加了一些颜色来强调，并且必须为 body 和 html 设置一些额外的高度，因为 jsFiddle 不会自动这样做，你不应该需要那个):] http://jsfiddle.net/48aET/