Question

我试图获得与此网站类似的内容：http://www.bacchica.com.br/

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

我不确定我是否可以仅使用CSS来实现，但到目前为止，我已经做了以下内容;

HMTL

<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命令，只能使用不带jQuery的CSS。这样你就可以这样做：

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

.navbar {
    height:100px;
}

通过这种方式，您告诉浏览器导航栏的高度为100像素（将其更改为您想要的任何值），幻灯片显示将是窗口的整个高度减去距其高度的100个像素。导航栏。然后导航栏将始终位于底部。

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

编辑2 ：我发现为什么会这样。我忘了把文件类型。一旦我把doctype html和高度添加到容器和正文，它就可以正常工作。 You can see it in this fiddle

流体图像包括导航栏

1 个答案: