Question

一如既往，我难以解释自己，所以我花时间创作了一个小小的演讲： http://dl.dropbox.com/u/25916579/drawing.svg

一开始似乎很容易，但一如既往，我在这里过头了。我想javascript可能是一个解决方案，但我不关心它。

我确实找到了一个适用于chrome和firefox的解决方案，但不是在IE中。

注意：我不关心对旧浏览器的支持。

这是我尝试解决问题的方法： http://jsfiddle.net/fLGUh/

正如已经提到的，我确实得到了一个使用chrome和firefox的工作解决方案，但它并不完美。

在IE中查看此内容时，您会发现底部的#fill没有按预期运行。

如果你知道不涉及javascript的击球方式，请告诉我。

最好的问候。

编辑：只是为了它的乐趣，我做了一些关于javascript解决方案的样子的研究，显然它并不像我最初想的那么容易，所以如果你想对它做些什么，你会受到欢迎。

EDIT2：在这一点上，我认为我不得不接受javascript解决方案可能是唯一的方法。真的太糟糕了。我吮吸javascript ...

EDIT3：已经提出了一个有效的解决方案，并指出了我的一个主要缺陷。有空的时候我会回来，完成这个。在此之前，谢谢大家和最诚挚的问候。

edit4：这完全符合我的要求：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(
  function() {
    var wh = $(window).height();
    var m = (wh-540)/2;
    if(wh > 540) {
      $('#content').css('margin-top', m).css('margin-bottom', m);
    }
  }
);
</script>
<style type="text/css">
html, body {
  margin: 0px;
  padding: 0px;
  background-color: black
}
#content {
  width: 960px;
  min-height: 540px;
  background-color: #eeeeee;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<div id="content">test</div>
</body>
</html>

Answer 1

http://jsbin.com/afemaz/ - 适用于Chrome，Firefox，Opera和IE＆gt; = 8。与您的解决方案不同，当窗口较小时，它不会裁剪内容的顶部。

Answer 2

仅使用HTML / CSS无法以可变高度垂直居中，您需要JS。

你可以尝试的是：

<div id="mydiv" style="width:960px; height:540px; margin:10px auto;">
<script type="text/javascript">
    var d = document.getElementById('mydiv');
    var h = window.innerHeight;
    if(h > 560) //window is smaller: use the minimal settings as defined in style
    {
        d.style.marginTop = (h - 540) / 2;
    }
</script>

window.innerHeight商店（我认为在浏览器中存在一些争议）实际的当前可用显示空间。 getElementById访问div。其style.marginTop（和marginBottom）以及style.height可让您控制这些维度。

注意事项：

脚本需要低于div，否则脚本将运行，但div尚未存在（这使得它无效）。
边距在加载时定义一次。如果您之后调整窗口大小，它将无法调整。

Answer 3

确定。我查看了你的原始jsfiddle并尝试删除你的填充div中的270px边距约束，正如你所说的底部填充在IE中表现错误。我明白你的意思，在IE9中，你的身高比顶部填充div大。我删除了这个约束，它在IE9中开始正常运行。 http://jsfiddle.net/fLGUh/3/顺便说一句，它在IE7中也是一样的。

另外，你的div id =＆＃34; fill＆＃34;应该是class =＆＃34; fill＆＃34;。

html / css框模型结构，居中和东西

3 个答案: