1

所以故事是这样的：

我正在制作一个主页内容由菜单和客户徽标组成的网站。但是按照我的设计方式，内容需要位于浏览器窗口的中心......所以总的来说，因为每个人的屏幕高度不同，每个浏览网站的人要么在页脚下有太多的空白空间，或部分内容被截断。

这是网站：http ://thinkinternational.co/

所以我修复它的想法是这样的：我在身体上方创建了一个缓冲区，正如您在下面的代码中看到的那样，但是我发现将百分比作为 div 高度的问题是父 div 需要有首先是一个特定的高度。不幸的是，我不是无所不知的，我无法预测每个浏览这个网站的人的屏幕尺寸，所以我不能给它一个具体的高度，否则我还不如把它留在原样第一名。

同时，我需要背景随着身体向下移动。只是为了振作起来。

这个问题有什么解决办法吗？？

<div id="main">
  <div id="TopBuffer"></div>
  <div id="body" class="clearfix">
      Content Here
  </div>   
</div>


body {
    background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
    -moz-background-size: inherit;
    -o-background-size: inherit;
    -webkit-background-size: inherit;
    background-size: inherit;
    height: 100%; }

main { color:#000; font-family:Arial,Geneva,sans-serif; margin:15px 0;height: 100%; }

TopBuffer { width:100%; height:25%; }
4

2 回答 2

2

就像您说的那样，要使百分比起作用的高度，您需要父母具有特定的高度。So height:100%onbody也可以使用html。（我也会从中删除边距和填充html）

html{
    margin: 0;
    padding: 0;
    height: 100%;
}

为了让你的背景一直向下拉伸，你需要在这行 CSS 中进行更改：

body{
    background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
}

根据您的喜好更改center -150pxto center center、 tocenter top或 to center bottom，以便您可以以更大的分辨率显示整个图像。

第一个center是背景的水平位置，第二个是垂直位置。

至于垂直居中您的内容，这是一篇不错的文章：

CSS垂直居中

于 2012-07-20T10:14:30.357 回答
0

如果您可以使用 javascript，则使用 window.outerHeight 获取浏览器高度并根据使用 javascript 或 jquery 设置缓冲区

于 2012-07-20T10:14:22.120 回答