0

I would like to build a fluid layout and would like to achieve something like

width:100%-200px;

i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?

4

4 回答 4

0

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

您可以尝试以下方法：

body {
    padding:0 2%;
}

#content {
    width:96%;
}

http://jsfiddle.net/YYhvT/

于 2012-08-20T11:50:09.763 回答
0

使用绝对位置...

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

见我的小提琴。

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

于 2012-08-20T11:54:29.327 回答
0

您可以在内容周围放置一个容器，并为其提供 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。）

于 2012-08-20T11:56:42.807 回答
0

这是我的解决方案，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这样的小图案

希望能帮助到你，

问候

于 2012-08-20T12:17:52.390 回答