html/css 盒子模型结构，居中和东西答案

【问题标题】：html/css box model structure, centering and stuffhtml/css 盒子模型结构，居中和东西
【发布时间】：2012-04-06 05:19:31
【问题描述】：

与往常一样，我很难解释自己，所以我花时间创建了一个小演示： http://dl.dropbox.com/u/25916579/drawing.svg

一开始似乎很容易，但与往常一样，我在这里不知所措。我想 javascript 可能是一个解决方案，但我不在乎。

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

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

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

如前所述，我确实得到了一个使用 chrome 和 firefox 的有效解决方案，但它并不完全完美。

在 IE 中查看此内容时，您会注意到底部的 #fill 未按预期运行。

如果您知道不涉及 javascript 的面糊方式，请告诉我。

最好的问候。

编辑：只是为了好玩，我对 javascript 解决方案的外观进行了一些研究，显然它不像我最初想象的那么容易，所以如果你想搞怪，欢迎你。

编辑2：在这一点上，我认为我不得不接受 javascript 解决方案可能是唯一的出路。实在是太糟糕了。我很讨厌 javascript...

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

编辑4：这正是我想要的：

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

【问题讨论】：

你想达到什么目的？而不是'关心'javascript似乎有点愚蠢，因为我似乎觉得你希望垂直居中一些东西？这（要有效地做到）通常需要某种 js；虽然我仍然不太确定你想做什么..
我正在努力实现我所描述的。如果我做得不够好，请让我确切地知道您不理解的内容，以便我可以改进我对解释我的想法的微弱尝试。究竟为什么我不关心 JavaScript 是一个漫长且无关紧要的故事，但由于我已经非常接近在没有它的情况下解决问题，我希望它实际上是可能的。
您的解释只是一个带有规范的文档，但它并没有解释您要做什么。请多解释
对不起，我不明白。我已经尽力解释了这个问题（如果我失败了，请告诉我），现在我只需要一个解决方案。什么不见了？老实说，我不明白。
嗯，我还是觉得我不明白这个问题。它包含矛盾的陈述。比如说，内容是 900px 高。视口为 1000。您希望边距 (1000-540)/2 = 230。但要保持内容居中，边距应为 50px。

标签： html css internet-explorer firefox google-chrome

【解决方案1】：

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

【讨论】：

抱歉，没有。随着内容区域高度的增加，上下边距减小，这不是本意。
使用视口高度和内容区域最小高度定义的边距：jsbin.com/ogahiq 知道你想如何使用它会很有趣。
我不确定它是否会在现实世界中发挥作用，但它确实很重要。目前我只是在做实验。无论如何，除了在您的示例中实际上没有最小高度的内容区域之外，它似乎完全符合我的要求，因此非常重要。在得出任何结论之前，我还有一些事情要测试，但看来你是今天的伟大救世主。现在必须去庆祝生日，但稍后会回来完成这个。
显然我弄错了。它实际上不起作用......哦，我厌倦了这个。只是想找出最佳答案并做其他事情。再次感谢大家。

【解决方案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 尚不存在（这使其无效）。
边距在加载时定义一次。如果您之后调整窗口大小，它不会调整。

【讨论】：

对不起。但这似乎对我不起作用。查看代码它应该或多或少地像我想要的那样工作，但显然它没有影响。请注意，说到 js，我是个白痴。
您使用的是 IE8 或更低版本吗？根据 W3Schools 的说法，这些是唯一不支持 window.innerHeight 的浏览器。
目前我正在使用 chromium，但可能需要 IE8 支持。我不确定有多少人实际使用它。无论如何，也许我做错了什么。毕竟我是个js菜鸟。
尝试创建一个空文件，复制并粘贴我的示例，保存为 test.htm 并在浏览器中打开它。它适用于我的FF；我不确定是什么让它无法在 jsFiddle 上运行。
@Zacariaz，您的网站访问者中至少有一半会使用某种类型的 IE，这就是为什么网络开发人员仍然对 IE 大发雷霆的原因。 ;)

【解决方案3】：

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

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

【讨论】：

Doh，对于 id VS 类。仅此一项实际上可能是问题所在，尽管当然需要进一步的测试。但是，您的示例并没有多大用处，因为它的顶部/底部边距为视口高度的 50%，实际上并没有多大用处。 50% 视口 - 50% 内容高度是我正在寻找的。span>
那么我认为 js 解决方案就是你想要的 ;)
是的，问题是我是个白痴。我已经研究这个问题几个小时了。这真的很简单： if(viewportHeight
哈哈。多德，我自己对 javascript 也有同样的感觉，但在你的网络角落里有很好......