Question

问题：我正在尝试制作一个带有固定标题的布局，用于唠叨和下方，这将是一个适合页面的图像。下面我想要内容的div。我面临的问题是我不能同时获得图像和内容div以适应屏幕和垂直堆叠。

IMG设置为绝对值，因为它是唯一可以让它100％适合屏幕而不调整边距的方法。但是，当我执行此操作时，我将用于内容的下方的div：.body2和.body3不会显示。

我想让所有内容与浏览器屏幕齐平并正确堆叠。

HTML：

<header>
    <div id="headernav">

    </div>
</header>

<div id="FixedBKG">
    <img src="Images/imgbkg.JPG" id="bkgimg"/>
        <div id="content">
            <div class="body2">

            </div>
        </div>

        <div id="content">
            <div class="body3">

            </div>
        </div>
</div>
</body>

CSS：

#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}

#FixedBKG {
width: 100%; 
height: 100%; 
}

#bkgimg {
width: 100%;
left: 0px; 
top: 0px; 
position: absolute;
}

.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;

display: block;
}

.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}

Answer 1

好的，这是第二稿：FIDDLE。

一般评论：

1.尽量不要在像这样的直接布局上使用定位。

我将图像更改为display: block并将其设为100％的div宽度 - 然后将其自身调整为容器，您可以然后根据需要调整容器。
我改变了两个较低div的高度，并添加了一个边框，这样你就可以更轻松地看到它们了。
你真的不需要100％的宽度，因为根据定义，div是100％。
您可以考虑为正文设置样式，并添加容器元素，以便在格式化方面提供更大的灵活性。

如果您想更改其他任何内容，请与我们联系。

CSS

img {
    display: block;
    width: 100%;
}
#headernav {
  height: 70px;
  line-height: 70px;
  text-align: center;
  width: 100%;
  background-color: black;
  color: white;
}
#FixedBKG {
  width: 100%; 
}

.body2 {
  background-color: #C0C0C0;
  height: 200px;
  width: 100%;
  border: 1px solid red;
}

.body3 {
  background-color: black;
  height: 200px;
  width: 100%;
  border: 1px solid  yellow;
}

低于IMG且100％宽度的内容Div将无法正确显示在IMG下方

1 个答案: