35

ビューポートの中央に配置されたコンテナがあるとしましょう...

.centered{margin: 0 auto; width:960px;}

...そしてそのコンテナ内には、ビューポート幅の 100% の幅が必要な別のコンテナがあります。マージンを次のように設定できます...

.widest{margin: 0 -480px}

... 例えば。問題は、値が -480px ではなく、実際にはビューポート幅 (960px) - .centered width / 2 ... calc() ですべて適切で簡単です。負の値である結果が必要なだけです.

.widest{
  margin: 0 calc( (100vw - 960px) / 2 );
}

負の値を取得するために 0 からロットを減算しようとしましたが、うまくいきません。

私はJSを使用したくありません.Webkitにのみ問題があります.calc()ではありません.私の問題は、.

.widest{
  margin: 0 -100%;
}

... Chrome/Safari でページが横スクロールします。

あなたの考え？

4

4 に答える 4

63

編集: 以前のものよりも簡単なトリック: calc(0px - something)- ユニットを使用 - 機能しないが、calc(0 - something)機能しない。Fiddle 3を参照してください

これらの「トリック」は次のように機能します。

calc(1px - something - 1px);
calc(-1 * something)
calc(0px - something) /* new */

どこにあり0 - somethingませんでしたか（少なくともあなたの例では）。

フィドル 1
フィドル 2

于 2014-08-08T14:11:29.033 に答える
27

はい、ある程度までは可能です。重要な部分は、要素の幅を設定してから100vw、ビューポート幅の負の半分と中央に配置された要素の幅の半分だけオフセットすることです。たとえば、次のようにしcalc(-50vw + 200px)ます。

デモフィドル

HTMLを考えると

<div id='center'>center
    <div id='full'>full width</div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
}
#center {
    width:400px;
    height:100%;
    background:red;
    margin:0 auto;
}
#full {
    width:100vw;
    height:100px;
    background:green;
    margin-left:calc(-50vw + 200px);
}
于 2014-08-08T13:51:46.757 に答える
3

次の解決策を試すことができます

.some-class {
   margin-left: calc(-1px - ((100vw - 100%) / 2) + 1px);
}
于 2019-05-02T10:19:35.237 に答える