0

流動的なレイアウトを構築したいのですが、次のようなことを達成したいと思います

width:100%-200px;

つまり、コンテンツを含む div があり、div id="content"どちらかの側に固定マージンで呼び出します。を別の div コンテナーに余白を付けて入れるというトリックを使用しようとしましdiv id="content"たが、 の背景を埋める方法がわかりませんdiv id="content"。div id="content"コンテンツの幅に余白の幅を加えたものがブラウザ ウィンドウのサイズの 100% を超えないように、使用可能なスペースの 100% を背景として使用するように指示する方法はありますか?

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

コンテンツの周りにコンテナを置き、左右に 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 しか使用できないため、使用できません。)

于 2012-08-20T11:56:42.807 に答える
0

絶対位置を使用...

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

私のFiddleを参照してください。

PSアドバンテージは、他の要素に値を必要としないことです。

于 2012-08-20T11:54:29.327 に答える
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 に答える