流体布局中的百分比与像素答案

【问题标题】：Percent vs. pixels in fluid layout流体布局中的百分比与像素
【发布时间】：2012-08-20 11:35:53
【问题描述】：

我想构建一个流畅的布局，并希望实现类似

width:100%-200px;

即有一个包含内容的 div，称之为div id="content"，两边都有固定的边距。我曾尝试使用将div id="content" 放入另一个带有边距的div 容器的技巧，但我不知道如何填写div id="content" 的背景。有没有办法告诉div id="content" 使用 100% 的可用空间作为背景，这样内容的宽度加上边距的宽度不超过浏览器窗口大小的 100%？

【问题讨论】：

对不起，你的意思是宽度：100%；边距：200px； ??

标签： html css fluid-layout

【解决方案1】：

将 DIV 设置为 100% 并在两边留出 XXX 的边距是行不通的，因为这会超出浏览器窗口的大小。

您可以尝试以下方法：

body {
    padding:0 2%;
}

#content {
    width:96%;
}

http://jsfiddle.net/YYhvT/

【讨论】：

2% 不是 200px ...我认为 TS 想要一个特定的值作为边距。

【解决方案2】：

使用绝对位置...

#content {
  position: absolute;
  left: 0;
  right: 200px;
}

见我的Fiddle。

PS优点是您不需要其他元素的值。

【讨论】：

【解决方案3】：

您可以在内容周围放置一个容器，并为其提供 200 像素的左/右填充。这应该可以解决问题（至少，根据我对您要完成的工作的理解）。另请参阅此代码示例：

<!doctype html>
<html>
<head>
    <style type="text/css">
        body { margin: 0 50px; }
        #container { padding: 0 200px; background: #FF0000; }
        #content { width: 100%; background: #00FF00; }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            Here goes my content
        </div>
    </div>
</body>
</html>

请注意，正文页边距仅用于说明目的，让您看到背景差异。

（我会发布一个 jsFiddle，但我无法使用它，因为此时我只能使用 IE7。）

【讨论】：

【解决方案4】：

这是我的解决方案， html:

<div id="content" class="content">
  My Content
</div>

css:

.content {
  position: absolute;
  right: 100px;
  left: 100px;
  background-color:#A5112C;
}

并链接到它：http://jsfiddle.net/MPYHs/

如果你想把某种图像作为背景，我建议你使用像https://ssl.gstatic.com/android/market_images/web/background_stripes.gif这样的小图案

希望对你有帮助，

问候

【讨论】：