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

Question

I would like to build a fluid layout and would like to achieve something like 我想建立一个流畅的布局，并希望实现类似

width:100%-200px;

ie have a div with content, call it div id="content" with a fixed margin on either side. 例如，有一个包含内容的div，则将其命名为div id="content" ，并在每边固定边距。 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" . 我尝试使用把div id="content"放入另一个带有边距的div容器中的技巧，但是我不知道如何填写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? 有没有办法告诉div id="content"使用100％的可用空间作为背景，以使内容的宽度加上边距的宽度不超过浏览器窗口大小的100％？

Answer 1

Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window. 将DIV设置为100％，并且每边都有XXX的边距将不起作用，因为这将超出浏览器窗口的大小。

You could try the following: 您可以尝试以下方法：

body {
    padding:0 2%;
}

#content {
    width:96%;
}

http://jsfiddle.net/YYhvT/ http://jsfiddle.net/YYhvT/

Answer 2

Use position absolute... 使用绝对位置...

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

See my Fiddle . 见我的小提琴。

PS Advantage is that you don't need values on other elements. PS Advantage是，您不需要其他元素上的值。

Answer 3

You can put a container around the content and give it 200px left/right padding. 您可以在内容周围放置一个容器，并为其左/右填充200px。 This should do the trick (at least, from what I understand of what you are trying to accomplish). 这应该可以解决问题（至少根据我对您要完成的工作的了解）。 Also see this code example: 另请参见以下代码示例：

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

Note that the body margin is just for illustrating purposes, to let you see the background differences. 请注意，机身边缘仅用于说明目的，目的是让您看到背景差异。

(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.) （我会发布一个jsFiddle，但是由于现在我只能使用IE7，所以我无法使用它。）

Answer 4

here is my solution, html: 这是我的解决方案，html：

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

css: CSS：

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

and link to it: http://jsfiddle.net/MPYHs/ 并链接到它： http : //jsfiddle.net/MPYHs/

also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif 另外，如果您想将某种图像作为背景，我建议您使用小图案，例如https://ssl.gstatic.com/android/market_images/web/background_stripes.gif

hope it helps, 希望能帮助到你，

regards 问候

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

问题描述

4 个解决方案

解决方案1
0 2012-08-20 11:50:09

解决方案2
0 2012-08-20 11:54:29

解决方案3
0 2012-08-20 11:56:42

解决方案4
0 2012-08-20 12:17:52

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

问题描述

4 个解决方案

解决方案1 0 2012-08-20 11:50:09

解决方案2 0 2012-08-20 11:54:29

解决方案3 0 2012-08-20 11:56:42

解决方案4 0 2012-08-20 12:17:52

解决方案1
0 2012-08-20 11:50:09

解决方案2
0 2012-08-20 11:54:29

解决方案3
0 2012-08-20 11:56:42

解决方案4
0 2012-08-20 12:17:52