CSSでwidth = 100％-100pxを実行するにはどうすればよいですか？

153

CSSでは、どうすればこのようなことができます：

width: 100% - 100px;

これはかなりシンプルだと思いますが、それを示す例を見つけるのは少し難しいです。

html  css 
— fmsf
ソース
1
リンクされた質問stackoverflow.com/questions/11093943/…は興味深いが、完全に下位互換性のある答えを提供しません。
— 11684 '19
5
この質問を通過する人にとって、チャドは最新のブラウザがwidth: calc(100% - 100px);それをサポートしていると答えたので、答えはいくつかあります。質問者が彼の質問を更新してくれることを願っています:) :)
— Anders M.

回答:

278

最近のブラウザーは次をサポートします：

width: calc(100% - 100px);

サポートされているブラウザバージョンのリストを確認するにはチェックアウト：calc（）をCSSユニット値として使用できますか？

jQueryフォールバックがあります：css幅：calc（100％-100px）; jqueryを使用した代替

— チャド
ソース
13
calc(100% - 6px)たとえば、それがと表示されcalc(94%)ていたときに使用していたときに、次のようにエスケープする必要がありましたが、動作しますwidth: calc(~"100% - 6px");
— nsilva '19 / 04/16
12
-（または+）文字の周りに空白が必要であることに注意してください。この作品：calc(100% - 100px); ：そして、これはそうではないcalc(100%-100px);
— freefaller
要素のパディングを自動的に2倍するオプションがないことに少し驚いています。これは通常、かなり一般的なユースケースです。たとえば、私はやらなければならないことになり、修正する必要がある場合padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);は0.25em、2か所を変更する必要があります。
— cnst
とても感謝しています。また、追加で機能することにも注意してください：（100％+ 100px）
— Viktor Mellgren
17

あなたはこれを試すことができます...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);
スニペットを展開

vw：ビューポートの幅

vh：ビューポートの高さ

— Barışçıracı
ソース
最初の解決策は正しいです。コンテナがウィンドウではない可能性があるため、100vhが100％にならない可能性があります
— Ben Taliadoros
1
私が使っていたとき、私が見つかりました。calc(100% - 6px)それが表示された、たとえばとしてcalc(94%)次のように私はそれを逃れるために持っていたし、今では動作しますが、width: calc(~"100% - 6px");
— nsilva
4

私のコード、そしてそれはIE6で動作します：

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

ここに画像の説明を入力してください

— ポンドウィーク
ソース
6
そのJavaScriptは何のためですか？
— ファイズ、2014
3

100％-100pxにするコンテンツdivのコンテナーが必要です

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

</div>コンテンツdivがオーバーフローしている場合は、最後の直前にclear divを追加する必要がある場合があります。

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>
— Aleemb
ソース
1
これは機能しません。コンテンツの幅は100％になります：jsfiddle.net/cuezK/1
— gilly3 '19
2

本文のマージンを0に設定し、外側のコンテナーの幅を100％に設定し、50ピクセルの左/右マージンを持つ内側のコンテナーを使用すると機能するようです。

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>
— Tvanfosson
ソース
2

ブートストラップパネルを使用して、ヘッダーパネルに「削除」リンクを配置する方法を探していましたが、これは長い隣接要素によって隠されません。そしてここに解決策があります：

html：

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

css：

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

もちろん、インデントに応じて、「上」と「右」の値を変更できます。ソース

— アルトゥール・ログインノフ
ソース
2

すべてのスペースをチェックしたときだけ、それは私のために働き始めました。したがって、次のように機能しませんでした。width: calc(100%- 20px)またはcalc(100%-20px)、完全にで機能しましたwidth: calc(100% - 20px)。

— アリナ・バビチェバ
ソース
1

できますか：

margin-right: 50px;
margin-left: 50px;

編集： 私の解決策は間違っています。幅100％のdivを使用し、マージンを使用して別のdivをネストすることを提案するAric TenEyckによって投稿されたソリューションは、より正確に思われます。

— ティラ・オロウジ
ソース
3
これを行うと、合計の幅が100％+ 100pxになってしまいませんか？
— Adam Crume、
：o（申し訳ありません。投稿を削除する必要がありますか、
— それとも辞退して反対
1
反対票は通常、反対票によって失われた担当者ポイントを取り戻すことができるように投稿をクリーンアップすることを奨励することを目的としています。ソリューションが間違っていることがわかっている場合は、反対票の有無にかかわらず削除するか、更新して正しいものにすることができます。
— aleemb 2009年
@AdamCrume-いいえ。これも指定した場合にのみ当てはまりますwidth:100%。明示的に指定widthしfloatたり、絶対配置を使用したりしてオーバーライドしない限り、divは自動的にコンテナを埋めます。divにマージンを追加すると、コンテナーを埋めるだけで、マージンで指定された量が減ります。
— gilly3
@aleemb-この場合、この回答は完全に正しいので、CSSを理解していないユーザーによる反対投票です。
— gilly3
1

外側のdivにパディングすると、望ましい効果が得られます。

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>
— ジョシュ・ブッシュ
ソース
1

この一般的なシナリオに役立つ2つのテクニックがあります。それぞれに欠点がありますが、どちらも役立つ場合があります。

box-sizing：border-boxは、アイテムの幅にパディングとボーダー幅を含みます。たとえば、divの幅を20px 20pxパディングと1pxボーダーで100pxに設定すると、実際の幅は142pxになりますが、border-boxでは、パディングとマージンの両方が100pxの内側になります。

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

これに関する優れた記事は次のとおりです：http : //css-tricks.com/box-sizing/そしてここにフィドルhttp://jsfiddle.net/L3Rvw/

そして、位置があります：絶対

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

もちろん、どちらも完璧ではありません。要素が実際には100％-100pxではなく100％幅であるため、box-sizingは質問に正確に適合しません（ただし、子divはそうです）。また、絶対配置はすべての状況で使用できるわけではありませんが、親の高さが設定されている限り、通常は問題ありません。

— デイブ
ソース
0

CSSは、アニメーションやイベントのスタイル変更には使用できません。

唯一の方法は、指定された要素の幅を返すjavascript関数を使用して、100pxを減算し、新しい幅のサイズを設定することです。

jQueryを使用しているとすると、次のようなことができます。 

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

そしてネイティブのjavascriptで：

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

100％のcssスタイルセットがあると想定します。

— ボリス・ゲリー
ソース
0

標準モードを使用していますか？この解決策は私が思うに依存します。

2つの列を作成しようとしている場合は、次のようにすることができます。

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

次に、CSSを使用してスタイルを設定します。

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

2列が必要ない場合は、おそらく削除できます <div id="left">

— ハンソン
ソース
0 
<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>
— RC。
ソース
0

CSSの前処理を行うJavaScriptファイルであるLESSを使用して、ロジックと変数をCSSに含めることができます。したがって、あなたの例では、LESSではあなたがwidth: 100% - 100px;望むものを正確に達成するように書くでしょう:)

— ジョン
ソース
-1

これは機能します：

margin-right:100px;
width:auto;
— ユーザー1552559
ソース
1
回答に説明を追加していただけませんか？
— のMichałPerłakowski
私は試してみました：calc（100％-100px）とすべてのプラットフォーム/ブラウザーで結果が一貫していないため、実際に単純化してmargin-right：100pxを使用しました。幅：自動; そしてそれは働いた...
— user1552559
calcはCSS3コンポーネントであり、このCSSはCSS3をサポートするブラウザーで動作します。
— Sushan 2017
-2

簡単に言えば、CSSではこれを行わないでください。Internet ExplorerはCSS式と呼ばれるものをサポートしていますが、これは標準ではなく、FireFoxなどの他のブラウザーではサポートされていません。

JavaScriptでこれを行う方がよいでしょう。

— プラビーン・アンヤン
ソース
ええ、私はそれをJavaScriptで保持する必要があると思います。いくつかのコードを屈折させて、そのTKSを実行していたJavaScriptを削除したかったのです。
— fmsf 2009年
1
してくださいあなたはそれがJavaScriptでこれをしない避けることができれば。HTML + CSSは注意が必要で、解決策は明らかではないかもしれませんが、必要なほとんどすべてのことを実行できます。静的レイアウトにJavaScriptを使用することは、ほとんどの場合悪い考えです。
— Nicole
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.