如何有一个div总是填充视口（完全响应）与紧随其后的内容？ [英] How to have a div always fill the viewport (fully responsive) with content immediately following it?

问题描述

我找到了这个网站：

http：// tocka。 co /

当你加载它时，你会看到红色背景与文本里面。这会占用整个屏幕，然后您可以向下滚动。尝试调整浏览器大小...这个div将永远填满，并允许您向下滚动到紧跟其后的内容。

When you load it up, you will see the red background with the text inside. This takes up your entire screen and then you can scroll down. Try resizing your browser...this div will always fill it up and allow you to scroll down to content that immediately follows it.

我想实现影响。任何想法，什么是最好的方式去实现这将是？我假设会涉及到一些Javascript。

I'm wanting to achieve the same effect. Any ideas on what the best way to go about achieving this would be? I'm assuming some Javascript would be involved?

谢谢alot。

推荐答案

特定网站使用JavaScript实现此效果。

The particular website uses JavaScript to achieve this effect.

下面我包括他们正在做什么的基本知识：

Below I include the basics of what they are doing:

<header class="winsize" style="background:#ff0000;">
    ...
</header>
<script type="text/javascript">
    $.fn.windowHeight = function() {
        return this.each(function() {
            var windowsize = $(window).height();
            $(this).height(windowsize);
        });
    };
    $(document).ready(function() {
        $('.winsize').windowHeight();
        $(window).resize(function() {
            $('.winsize').windowHeight();
        });
    });
</script>

加载时，该区域的高度与窗口的高度相同，它再次完成。

On load, the area is given the same height as the window, and every time it is resized, it is done again.

这篇关于如何有一个div总是填充视口（完全响应）与紧随其后的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！