Html高度缓冲区

我正在制作一个网站，其中的主页内容是由一个菜单和客户端徽标组成。但是我设计它的方式，内容需要位于浏览器窗口的中心......因此，所有人都拥有不同的屏幕高度，因此，每个查看网站的人都有太多的空白空间页脚或部分内容被切断。

所以我的想法来解决它是这样的：我创建的体上方的缓冲地带，因为你可以在下面的代码中看到的，但我已经发现了问题有一个百分比作为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%; }

来源

2012-07-20 Nona Dobbs

就像你说的设置缓冲区，以使与百分比工作的高度，你将需要父母有一个特定的高度。因此height:100%在body上也会起作用，一旦你把它放在html上。（我也删除html margin和padding）

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

，并让您的背景舒展一路下跌，你将需要在此行中的CSS进行更改：

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

请将center -150px更改为center center，更改为center top或center bottom，具体取决于您偏好哪一个，以便在较大的分辨率下显示整个图像。

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

至于你居中垂直的内容，这是一个很好的文章：

Vertical Centering With CSS

来源

2012-07-20 10:14:30 Dan

那太好了，谢谢你......我需要它的一些更多的发挥，并测试它在几个屏幕，确保它有效，并调整百分比。 – 2012-07-20 10:21:50

为背景寿，是否有可能让它基本上匹配内容？客户想要的顶部排立方体的菜单....这仍然有可能以某种方式？ – 2012-07-20 10:23:04

@NonaDobbs如果你需要你的内容垂直居中，并且所有的屏幕都可以看到背景，那么我恐怕不会，你将不得不放弃其中一个选项。 – Dan 2012-07-20 10:31:38

如果你可以使用JavaScript然后使用window.outerHeight得到浏览器的高度，并根据所使用的JavaScript或jQuery的

来源

2012-07-20 10:14:22

Html高度缓冲区

回答

相关问题