Question

我想建立一个流畅的布局，并希望实现像

这样的东西

width:100%-200px;

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

Answer 1

将DIV设置为100％，任何一方的边距为XXX都不会有效，因为这会超出浏览器窗口的大小。

您可以尝试以下方法：

body {
    padding:0 2%;
}

#content {
    width:96%;
}

http://jsfiddle.net/YYhvT/

Answer 2

使用绝对位置......

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

查看我的Fiddle。

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

Answer 3

您可以在内容周围放置一个容器，并为其提供200px左/右填充。这应该是诀窍（至少，从我对你想要完成的事情的理解）。另请参阅此代码示例：

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

Answer 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这样的小图案

希望它有所帮助，

问候

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

4 个答案: