3

私はCSSプロパティを扱ってきましたが、calc()それについて1つの疑問があります:

.main {
  display: block;
  margin-left: 4rem;
  width: (100% - nav);
  background: red;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 4rem;
  height: 100vh;
  background: #292929;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

差し引こうとしているコードでわかるように、レスポンシブ モード用100%のナビゲーションWIDTHですremが、明らかに機能しません。これを行う方法はありますか?

4

4 に答える 4

5

でセレクターを引数として使用することはできませんcalc()。 を減算したい場合は、既に設定されているを減算しnavます。widthnavwidth

.main {
  width: calc(100% - 4rem);
  /* mores styles */
}

calc()CSS 関数は、<length>、<frequency>、 <angle>、<time>、<number>または<integer>が必要な場所ならどこでも使用できます。

.....

式

式は、標準の演算子の優先順位規則を使用して、次の演算子を組み合わせた単純な式にすることができます。

+ 添加。

- 減算。

* 乗算。少なくとも 1 つの引数は<number>.

/ 分割。右辺は<number>.

式のオペランドは、任意の長さの構文値にすることができます。必要に応じて、式の各値に異なる単位を使用できます。必要に応じて、括弧を使用して計算順序を確立することもできます。

于 2016-09-22T20:07:20.977 に答える
1

CSS 変数が機能するかどうかを調べてみましたが、Chrome でも機能するようです (ただし、Edge では機能しません)。互換性の問題により、ブラウザーのサポートが増えるまでこの回答が受け入れられなくなる可能性があると確信していますが、将来の訪問者や個人的なプロジェクトのために追加したかったのです。

:root {
  --nav-width: 5em;
}

nav {
  background: red;
  width: var(--nav-width);
  height: 1em;
}

div {
  background: blue;
  width: calc(100% - var(--nav-width));
  margin-left: var(--nav-width);
  height: 1em;
}
<nav></nav>
<div></div>

于 2016-09-22T20:17:30.343 に答える
0

残念ながら、そのようには機能しません。「10px」や「3rem」などのあらかじめ決められた値である必要があります。

ただし、これを行うことができます：

.main {
    /* ... */
    width: calc(100% - 4rem);
}
于 2016-09-22T20:07:16.780 に答える
0

要素全体（nav）を減算することはできません。正確な値でなければなりません：

<length>, <frequency>, <angle>, <time>, <number>, or <integer>

このようにしたい場合は、Sass などのプリプロセッサを使用することを検討してください。新しい変数を追加して、幅の値に等しくすることができます。次に、幅とこの変数を差し引くことができます。

サス方法:

$nav-width: 10px;

.main {
display: block;
margin-left: 4rem;
width: (100% - $nav-width);
background: red;
}
于 2016-09-22T20:17:42.277 に答える