一次性確定內容寬度

建立網頁時，除非網頁是完全流動的，否則設定最大內容寬度（例如 960px 或 1280px；以下稱為「內容寬度」）會更有效率。

使用 CSS 實現這一點的一種方法是指定每個部分及其內每個元素的最大寬度。

<article>
  <div class="content">
    <h1>奔跑吧梅洛斯</h1>
    <p>梅羅斯十分憤怒。他決心，一定要不惜一切代價，除掉這個邪惡、暴虐的國王。 …</p>
    ...
  </div>
</article>

.content { 最大寬度: 960px; 邊距: 0 自動; }

但是，在這種情況下，您需要為每個區塊指定類別或添加額外的元素，這使得變更變得有些繁瑣。

我希望能夠一次性確定內容寬度，而無需做任何額外的事情...

因此，我們建議在涵蓋全部內容的父元素上指定它。

<main>
  <article>
    <h1>奔跑吧梅洛斯</h1>
    <p>梅羅斯十分憤怒。他決心，一定要不惜一切代價，除掉這個邪惡、暴虐的國王。 …</p>
    ...
  </article>
  <article>
    <h1>不再是人類</h1>
    <p>我見過那個男人，三葉的照片。</p>
    ...
  </article>
</main>

主要 { 最大寬度： 960px; 邊距： 0 自動; }

這樣，即使您稍後添加新元素，它也會毫不猶豫地適應內容寬度。

我想填充背景

如果您希望背景填滿整個螢幕，這種在父元素上集體指定內容寬度的方法可能會有問題。上述方法 。 可以簡單地將背景指定為元素的父級，但是使用此方法是不可能的。

因此如果您想拉伸背景，可以使用負邊距。

.expand { 右邊距： calc(50% - 50vw); 左邊距： calc(50% - 50vw); 右內邊距： calc(50vw - 50%); 右內邊距： calc(50vwT - 50112);

如果您使用 Sass，將其註冊為 mixin 很有用。

50% 是內容寬度的一半（範例中為 480px），50 伏 將是視窗寬度的一半，因此如果視窗大於內容寬度，則邊距將為負數並且會溢出。然後，透過用填充填充多餘的部分，您可以使背景填滿整個螢幕，同時保持內容寬度。

然而，當存在滾動條時，這種方法會產生問題。大眾 是根據包括滾動條在內的視窗寬度計算的，因此如果有垂直滾動條，內容將超出滾動條並不再適合螢幕，從而導致水平滾動。

因此，請確保看不到任何水平懸垂。

主體 { 溢出-x： 隱藏；

這將隱藏多餘的部分，因此您不必橫向滾動。

看看筆
由 SHIN Inc. (@shin-inc) 擴展背景寬度
在 CodePen 上。

無 overflow-x:hidden 填充

如果出於某種原因溢出-x:隱藏如果您不想或不能使用'，則需要將捲軸寬度新增至邊距。

但是我不知道滾動條的寬度，而且根據環境不同寬度可能會有變化，或者根本不顯示。透過制定固定的決定你什麼也做不了。

解決這個問題的方法是將 CSS 自訂屬性與 JS 結合。自訂屬性是處理 CSS 中「變數」的機制。您可以毫無問題地使用任何當前主流的瀏覽器。

例如，如下使用：

.box { --lh: 1.5; height: calc(var(--lh) * 8em); // 固定高度 8 行 line-height: var(--lh); overflow: auto; }

自訂屬性 --lh 您可以透過賦予一個以兩個連字符開頭的名稱和一個特定的屬性值（此處為 1.5）來聲明屬性。讀取值 var() 被使用。

使用此自訂屬性來設定您的 CSS，如下所示：

:root { --scrollbar: 0px; } .expand { 右邊距：calc(50%-(100vw-var(--scrollbar)) / 2); 左邊距：calc(50%-(100vw-var(--scrollbar)) / 20%-(100vw-var(--scrollbar)) / 202-100(Fv) 200013)) 200100 T); 左填充：calc((100vw-var(--scrollbar)) / 2 - 50%); }

50 伏 相反，100 伏 計算使用結果的一半減去滾動條的寬度。

滾動條寬度本身是使用JS計算和取得的。

const 捲軸 = window.innerWidth - document.documentElement.clientWidth + 'px'; document.documentElement.style.setProperty('--scrollbar', 捲軸);

視窗的內部寬度減去 HTML 元素的寬度就是捲軸的寬度。只需將其作為自訂屬性提供給根元素（HTML 元素），CSS 將完成剩下的工作。此功能在那些不支援自訂屬性的瀏覽器中被停用，但它不會影響查看，因為背景不會被拉伸。

您可能沒有很多機會使用此方法，但它允許您從 CSS 方面自由處理「滾動條寬度」。

智慧型手機出現的問題

這與主題無關，但在智慧型手機上身體' 到 '溢出-x:隱藏指定 ' 無效。超出左側的任何內容都將不可見，但超出右側的任何內容都會水平滾動。

智慧型手機瀏覽器通常不會顯示捲軸，所以這不是問題，但如果有瀏覽器顯示捲軸，內容就會超出限制，所以使用上述自訂屬性的方法可能會很有用。 ' 在內部元素上溢出-x:隱藏只需指定'就很容易了。