屏幕宽度一定百分比的填充答案

【问题标题】：Padding of a certain percentage of screen width屏幕宽度一定百分比的填充
【发布时间】：2012-12-24 23:48:48
【问题描述】：

我有一个主容器 div，我希望它从屏幕顶部精确地设置边距，例如屏幕宽度的10%。这样我就不会遇到屏幕尺寸不均匀等问题。

我已经找到了一个肮脏的解决方法，即将背景颜色的1px by 1px 图像放在 div 之前，然后将其设置为具有屏幕宽度的10%。但这看起来很脏，不是吗？有没有更好的解决方案？

【问题讨论】：

你尝试了什么，你能显示你的代码吗？

【解决方案1】：

与 Rubens 相同的解决方案，但不使用表格。我还放置了一些代码来处理您询问的上边距，但使用填充代替。

<html>
 <head>
 <title>...</title></head>
 <body>
  <div id="content">
   Your whole page comes here...
  </div>
 </body>
</html>


* {
    padding:0;
    margin:0;
}

html, body {
    height:100%;
}

body {
    padding:10% 0 0;
}

#content {
    width: 850px; // replace with your desired width
    margin:0 auto;
}

【讨论】：

【解决方案2】：

我觉得非常优雅的解决方案是将页面插入表格中，从正文之后开始，并在正文之前终止。

你会得到这个：

<html>
<head><title>...</title></head>
<body>
<table id="content"><tr><td>

    Your whole page comes here...

</td></tr></table>
</body>
</html>

现在只需使用样式来决定页面的大小：

#content {

    width: 850px;
    margin-left: auto;
    margin-right: auto;

}

【讨论】：

但这肯定是一个糟糕的主意，因为表格并不像 10 多年前那样用于布局目的。表格只能用于显示表格数据。
我真的认为在使用表时没有任何问题：这是一个完全跨浏览器的解决方案；它不需要任何狡猾的附魔来使它起作用；它确实有效。不使用旧的东西实际上是我能在这里看到的唯一可怕的事情。
这是我最喜欢的一篇关于为什么不使用表格进行布局的帖子。我希望它有助于改变你的看法：stackoverflow.com/questions/83073/…
感谢推荐；我将阅读稍后提出的论点，但我很确定在此特定目的上使用表格是不可避免的——主要是考虑到图像是从页面的一侧添加到另一侧以使其居中。
老实说，我不敢相信这已被接受为答案。荣誉鲁本斯。