四个不同的 CSS 元素在彼此下方答案

【问题标题】：Four different CSS elements below each other四个不同的 CSS 元素在彼此下方
【发布时间】：2014-08-18 02:30:11
【问题描述】：

我正在尝试实现以下布局：

导航标题：从顶部固定高度和固定位置，
宽水平图像横幅：固定位置，但可随主窗口调整大小，
内容区域：从图片横幅开始的文本，带有自动滚动条，并且
信息页脚：固定高度和底部固定位置。

我的问题是 #3，实际内容文本区域。由于可调整大小的图像，我不能使用固定位置，但是我不能通过将内容 DIV 与 overflow:auto 放置在图像 DIV 中来使用相对于 #3 的相对位置——因为这样图像开始滚动也是。由于图像大小可变，我认为我必须使内容文本成为图像横幅的子项，但我无法完全按照我想要的方式获得它。

HTML：

<div id="nav">
... navigation banner ...
</div>


<div id="topimg">
<img src="images/01-shop.jpg" width="100%">

<div id="content">
... text ...
</div>

</div>


<div id="footer">
... footer content ...
</div>

CSS：

#nav {
position: fixed;
height: 47px;
width: 90%;
margin-left:5%; 
margin-right:5%;
}

#topimg {
position: fixed;
width: 80%;
margin-left:10%;
margin-right:10%;
top: 90px;
}

#content {
position: ???
width: 80%;
margin-left:10%;
margin-right:10%;
overflow: auto;
}

#footer {
position: fixed;
height: 27px;
width: 90%;
bottom:10px;
margin-left:5%; 
margin-right:5%;
}

有人有好的建议吗？

提前谢谢你！

【问题讨论】：

如果您使用JSFiddle 证明您的问题，这将帮助每个人更好地理解您的问题。

标签： html css

【解决方案1】：

这就是你要找的吗？ - FIDDLE

我不确定您是否真的需要做很多 position: fixed 才能获得直接的布局。

（我添加边框只是为了让事情更容易看到）

CSS

#nav {
  height: 47px;
  width: 90%;
  margin-left:5%; 
  margin-right:5%;
  border: 1px solid black;
}

#topimg {
  width: 80%;
  margin-left:10%;
  margin-right:10%;
  margin-top: 20px;
  border: 1px solid red;
}

#content {
  width: 80%;
  margin-left:10%;
  margin-right:10%;
  overflow: auto;
}

#footer {
  position: fixed;
  bottom:10px;
  height: 27px;
  width: 90%;
  margin-left:5%; 
  margin-right:5%;
  border: 1px solid blue;
}

【讨论】：

【解决方案2】：

工作小提琴：http://jsfiddle.net/jkkhbku8/5/

如果我正确理解您的问题，这应该是可以实现的。这里有点事情，所以我会尽力解释。

首先，您需要在页眉下方添加一个伪元素，以填补页眉和图片横幅之间的空隙。这是在文本向上滚动时使用的。它应该与文档正文的背景颜色相同。

接下来，由于图像横幅 div 的位置是固定的，但您希望它响应浏览器宽度，您需要将其高度设置为 0px，并使用填充使其高度为宽度的 %。此填充将基于您的图像的比例，但可能需要一些调整，因为支架设置为每边 10%。对于 16:9 的图像，您通常会使用 padding-bottom: 56.25%，但基于 10% 的左右边距，此处理想的 padding-bottom 为 45%。你可以为你的图片调整这个。

#topimg {
    height: 0px;
    padding-bottom: 45%;
}

如果你不知道图片的比例，那么你需要使用一些JS来找出它并设置填充。

对于内容，您需要先用margin-top: 90px（标题的高度）向下推，然后用padding-top: 45%（#topimg 的高度）向下填充。这将确保它在调整大小时隐藏在图像 div 下。您还需要在其底部放置一个边距，以便在滚动时远离页脚。

最后，您无法看到固定页脚下方的文本，您需要将其保留在底部并使用padding-bottom: 10px 而不是bottom: 10px，然后为其设置纯色背景色。你当然可以在这里使用另一个伪元素，但同样易于使用填充。

希望对您有所帮助。

【讨论】：