6

サイド ナビゲーションのあるサイトがあり、画面の残りの部分を画像で埋めたいと思います。サイド ナビゲーションは左側にあり、幅は 150px です。

理想的には全画面画像を に設定しwidth:100% -150px;たいのですが、これは適切な CSS ではないと確信しています。

同じ効果を達成する方法はありますか？width:90%;幅の広い画面では、150px は幅の 10% ではなく 5% のようになるため、使用できません。

4

5 に答える 5

8

実際、そうです！(css3あり)

width: calc(100% -150px);
width: -moz-calc(100% - 150px);
width: -webkit-calc(100% - 150px);

動作しますが、最新のブラウザでのみ... caniuse

これを使用したくない場合は、 margin を使用して offset: を作成できますmargin-left:150px;。ただし、これには、幅が 100% の親要素と、画像がブロックレベルの要素 ( display:block) である必要があります。

別のオプションは、box-sizingを使用することです。これにより、要素幅へのマージンとパディングを計算しない別のボックスモデルを選択できます。これは、いくつかの典型的な「100% 幅 - Xpx 境界線が必要」の場合にも役立ちます。

@BerkerYüceer のコメントに応えて、次のように計算内で動的な値を使用することもできます。

/* declare css variable */
--leftmargin:150px;

/* use the variable like following */
calc(100% - var(--leftmargin));
于 2012-06-19T15:00:49.417 に答える
3

calc（）を使用すると、CSS3のみを使用して必要なものを取得できます。

div{
width: 100%;
width: calc(100% - 150px);
width: -moz-calc(100% - 150px);
width: -webkit-calc(100% - 150px);
}

ここで例を見ることができます

IE9、Firefox、GoogleChromeで正常に動作します。

追加リファレンス：https ：//developer.mozilla.org/en/CSS/-moz-calc

于 2012-06-19T15:03:35.237 に答える
2

デモ: http://jsfiddle.net/MY6Z9/

#content { margin-left:150px }

#contentあなたのアイテムが、display:blockデフォルトで利用可能な幅を埋める要素であると仮定します。

タイリングではなく単一の画像で幅を埋める場合は、background-size最新のブラウザーで背景画像を使用できます。

#content {
  background:url(myimage.jpg) no-repeat;
  background-size:100% auto; 
}

デモ: http://jsfiddle.net/MY6Z9/5/

于 2012-06-19T15:03:06.967 に答える
0

非position:static要素の場合は、設定を試すことができますright: 150px;

于 2012-06-19T15:00:41.727 に答える
0

これを実現するには、 #image-full div の周りにラッピング div を使用できます。

#image-wrapper
{
    position:absolute;
    width:100%;
    padding-right:150px;
}

#image-full
{
    width:100%;
    background-image:url(...);
    /* ... */
}

#navigation
{
    position:absolute;
    width:150px;
}
于 2012-06-19T15:06:26.620 に答える