Question

我一直在寻找模仿一些网站来学习一些新的技巧。

在这样做的时候，我想出了一些模仿某个网站的麻烦。

http://dangblast.com/这是该网站的链接。

如果你看一下网站的顶部有一个div，其中包含一个背景图片，其中包含一个“绝对”位置和一个“背景大小”，我的问题从这里开始。

在该div的正下方，还有另一个div（id =“about”）紧跟在后面，令人惊讶的是，即使窗口大小发生变化，div也总是紧随其后。

从我的不足中，我认为不可能一个接一个地堆叠“绝对的”或“固定的”定位div，它们只是变得分层。

实现这种效果有诀窍吗？

现在我的网站上有一个div，如下所示

Html

<div id = "fill_screen">
</div>

<div id = "followup_div">
</div>

CSS

#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
}

有没有办法让div适合在绝对或固定定位的div下面，它也填满了屏幕的窗口？这对于网络浏览器的大小是动态的吗？

我做了一些研究，并且有使用视口高度（vh）的技术，但我看到一些旧的浏览器与它不兼容。

Answer 1

您必须修改followup_div的位置。 followup_div使用绝对定位，必须从顶部移动100％。

HTML：

<div id = "fill_screen">
    <button>text</button>
</div>

<div id = "followup_div">

</div>

CSS：

body {
margin:0px;
}

#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
right:0;
bottom:0;
background-color:red;
}

#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
position:absolute;
top:100%;
}

<强> DEMO

Answer 2

如果你看一下id =＆＃34; intro＆＃34;的顶部你可以看到class =＆＃34; intro-down＆＃34;。这个锚为固定的div腾出空间，如果你删除它，你可以看到id＆＃34; intro＆＃34;（这是一个固定的div）将会消失。

在全屏div下使用＆＃34;固定或绝对＆＃34;？

2 个答案: