jquery - 包括导航栏的流体图像

Question

我正在尝试实现类似于此站点的内容:http://www.bacchica.com.br/

对于任何大小的窗口，导航栏都将位于底部直到您滚动。

我不确定我是否可以仅使用 CSS 来完成，但到目前为止我已经完成了以下工作；

HTML

<div class="container">

<ul class="jquery slideshow">
  <li><img src="01.jpg" /></li>
  <li><img src="01.jpg" /></li>
</ul>

<div class="jquery navbar">
        <div class="inner">
            <a href="#s1" class="subNavBtn" id="s1">Section 1</a> 
            <a href="#s2" class="subNavBtn" id="s2">Section 2</a>
            <a href="#s3" class="subNavBtn" id="s3">Section 3</a>
            <a href="#s4" class="subNavBtn" id="s4">Section 4</a>
            <a href="#s5" class="subNavBtn" id="s5">Section 5</a>
        </div>
    </div>
</div>

CSS

.container{
    width:100%;
}

上面有一个幻灯片放映，幻灯片放映下面有一个导航栏，显示为 100% 宽度，我现在需要的是让它们作为一个整体适应任何窗口大小。

Answer 1

您可以通过 calc 命令仅使用 CSS 而无需使用 jQuery。这样你就可以做这样的事情:

.slideshow {
    height:calc(100% - 100px);
}

.navbar {
    height:100px;
}

这样您就可以告诉浏览器导航栏的高度为 100 像素(将其更改为您想要的任何值)，幻灯片将是窗口的整个高度减去窗口高度的 100 像素导航栏。然后导航栏将始终在底部。

编辑:我在本地测试过，它工作正常，我试图把它放在 jsfiddle 中，但失败了。这是我的代码，它在 IE 和 Chrome 上运行良好:

编辑 2:我找到了发生这种情况的原因。我忘了放文档类型。一旦我放入 doctype html 并向容器和主体添加高度，它就可以正常工作。 You can see it in this fiddle .