Question

我试图实现以下布局：

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

我的问题是＃3，实际的内容文本区域。由于可调整大小的图像，我无法使用固定位置，但是我不能通过在图像DIV中放置溢出：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%;
}

有没有人有好的建议？

提前谢谢！

Answer 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;
}

Answer 2

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

如果我理解你的问题，这应该是可以实现的。这里有一点点，所以我会尽力解释。

首先，您需要在标题下方添加一个psuedo元素，以填充标题和图像横幅之间的空白。这是在文本向上滚动时。它应与文档正文颜色相同。

接下来，由于图像横幅div固定在位，但您希望它响应浏览器宽度，您需要将其设置为0px的高度并使用填充使其高度为其宽度的百分比。此填充将基于您的图像比例，但可能需要一些调整，因为持有人每侧设置10％的折扣。对于16：9的图像，通常使用padding-bottom: 56.25%，但基于10％的左右边距，理想的填充底部为45％。你可以为你的形象调整一下。

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

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

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

最后，因此您无法看到固定页脚下方的文字，您需要将其保留在底部并使用padding-bottom: 10px代替bottom: 10px，然后为其提供纯色背景色。你当然可以在这里使用另一个psuedo元素，但同样容易使用填充。

希望有所帮助。

四个不同的CSS元素彼此相同

2 个答案: