流體布局中的百分比與像素

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;
}

見我的小提琴。

PS Advantage是，您不需要其他元素上的值。

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 個解決方案

解決方案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