-1

与往常一样，我很难解释自己，所以我花时间创建了一个小演示： 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很烂...

编辑3：已经提出了一个有效的js解决方案，并指出了我的一个主要缺陷。等我有时间我会回来完成这个。在那之前，谢谢大家和最好的问候。

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>
4

3 回答 3

2

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

于 2012-04-04T15:13:54.370 回答
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 尚不存在（这使其无效）。
  • 边距在加载时定义一次。如果您之后调整窗口大小，它将不会调整。
于 2012-04-04T15:22:58.643 回答
1

行。我查看了您原来的 jsfiddle 并尝试删除填充 div 中的 270px 边距约束，正如您所说的底部填充在 IE 中的行为错误。我明白你的意思，在 IE9 中，你的高度比顶部填充 div 大得多。我删除了这个约束，它开始在 IE9 中正常运行。 http://jsfiddle.net/fLGUh/3/ BTW，它在 IE7 中也一样。

此外，您的 div id="fill" 应该是 class="fill"。

于 2012-04-04T16:06:50.163 回答