1

这是我在 stackoverflow 上的第一篇文章（对我来说轻松一点）这可能是一篇冗长的、过度解释的文章。请原谅我，我从来都不擅长轻松地表达我的话。

基本上，我的页面包含 5 个 div...

  • #wrap- 包含所有其他元素
  • #header- 标题
  • #main- 这包含#imgcont div
  • #imgcont- 这包含一个图像
  • #footer- 页脚

现在，#footer即使调整大小，我也被锁定在页面底部。这是我需要保留的功能。这#imgcont是我需要垂直和水平对齐的div。它基本上需要“浮动”在页面的中心，而不会在调整大小时与#headerand重叠或重叠#footer。

我遇到的问题是在#imgcontdiv 内垂直对齐#maindiv，而不使其与#headerand重叠或重叠#footer。我现在使用的代码是：

html, body {height: 100%;}
#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 100px;
}  /* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear: both;
    background-color: #999;
} 
#header {
    height: 100px;
    background-color: #999;
}

/*Opera Fix*/
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}
#imgcont {
    width: 1000px;
    height: 300px;
    background-color: #FC3;
    margin: auto;
}

显然，这只会使我的#imgcont水平对齐，但我确实在互联网上找到了一个代码，当窗口为全尺寸或大于#imgcont...

#imgcont {
    width: 1000px;
    height: 300px;
    background-color: #FC3;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

...但是当窗口变小时，#imgcont开始与 . 重叠#header并在#footer.

当它们相遇时，我需要#imgcont“锁定”到页眉和页脚，然后保持水平对齐。

任何人都可以请提供任何见解，我把我的头发拉出来！:(

我希望我已经很好地解释了这一点，让你理解，因为我自己也几乎不明白！

在此先感谢，鲍勃

4

1 回答 1

0

您需要固定身体的高度和宽度。例如。

.body {   
height: 900px;
width: 1000px;
 }
于 2013-01-16T11:17:49.913 回答