如何使側邊欄全寬僅完全填充一側？

Question

我有一個max-width: 800px; ，里面有兩列 col_1 和 col_2，一切都按預期工作。 對於初始代碼，如果你把頁面全屏，col_1 是一個長長的紅色列。 紅色列的左邊什么都沒有，只有白色。 我希望 col_1 左側的空白區域與 col_1 的顏色相同。

更新：目前按照用戶 tobiv 的推薦使用漸變背景進行此操作。 但這並不總是一個好的解決方案。 例如，在加載頁面時，由於首先加載了 body 標簽，因此會顯示令人討厭的漸變。

我怎樣才能實現這個目標？

這是一個例子： https://www.uxlibrary.org/explore/ui-design/articles/design-systems

這是我的代碼的結構：

 body { background: linear-gradient(90deg, red 0%, red 50%, white 50%); }.container_one { display: block; max-width: 800px; margin-left: auto; margin-right: auto; background: white; }.container_two { display: flex; width: 100%; }.col_1, .col_2 { display: flex; flex-direction: column; } /*Col Width */.col_1 { width: 20%; border-right: 1px solid gray; padding-right: 15px; position: -webkit-sticky; position: sticky; top: 0; align-self: flex-start; height: 100vh; background: red; }.col_2 { width: 80%; padding-left: 15px; }.element { background: #f3f3f3; margin: 5px 0; padding: 10px; }

 <div class="container_one"> <div class="container_two"> <div class="col_1"> <span class="element">Element 1</span> <span class="element">Element 2</span> <span class="element">Element 3</span> </div> <div class="col_2"> <span class="element">Element 1</span> <span class="element">Element 2</span> <span class="element">Element 3</span> <span class="element">Element 4</span> <span class="element">Element 5</span> <span class="element">Element 1</span> <span class="element">Element 2</span> <span class="element">Element 3</span> <span class="element">Element 4</span> <span class="element">Element 5</span> <span class="element">Element 1</span> <span class="element">Element 2</span> <span class="element">Element 3</span> <span class="element">Element 4</span> <span class="element">Element 5</span> </div> </div> </div>

Answer 1

我不確定我是否理解你的問題，但這里有一個例子：

HTML

<body>
  <div class="container">
    <div class="left-side--container">
      <div class="col_1">
        <span class="element">Element 1</span>
        <span class="element">Element 2</span>
        <span class="element">Element 3</span>
      </div>
    </div>
    <div class="col_2">
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
    </div>
  </div>

  <body>

CSS

* { margin: 0; padding: 0;}

.container {
  display: flex;
  margin-left: 0;
  margin-right: auto;
}

.col_1, .col_2 {
  display: flex;
  flex-direction: column;
}

.left-side--container {
  display: flex;
  justify-content: flex-end;
  width: 30%;
  background: #FC664E;
}

.col_1 {
  width: 40%;
  border-right: 1px solid gray;
  padding-right: 15px;
  height: 100vh;
  background: red;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.col_2 { 
  width: 800px;
  padding-left: 15px;
  background: gray;
}

.element {
  padding: 10px;
  font-family: arial;
}

您只需將#FC664E顏色更改為紅色。

Answer 2

如果您在主容器中添加白色（或其他純色）背景，則可以在主體中添加帶有硬中心的漸變背景（因此它不是真正的漸變，而是條紋）：

.container_one {
    /* ... */
    background: white;
}

body {
    background: linear-gradient(90deg, red 0%, red 50%, white 50%);
}

如何使側邊欄全寬僅完全填充一側？

問題描述

2 個解決方案

解決方案1
2 已采納 2022-08-22 15:27:25

HTML

CSS

解決方案2
1 2022-08-22 14:54:36

如何使側邊欄全寬僅完全填充一側？

問題描述

2 個解決方案

解決方案1 2 已采納 2022-08-22 15:27:25

HTML

CSS

解決方案2 1 2022-08-22 14:54:36

解決方案1
2 已采納 2022-08-22 15:27:25

解決方案2
1 2022-08-22 14:54:36