欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

使元素不水平滾動

CSS
傅智翔2年前8瀏覽0評論

我正在嘗試用以下內容進行布局:

標題(代碼片段中的灰色塊) 一具尸體(萊姆·博德) 主體內容(帶紅色邊框的塊) 如果你水平滾動，那么標題不應該滾動，它應該是全幅的，并留在視圖中。如果您垂直滾動，那么頁眉應該像往常一樣滾動到頁面之外。標題的高度是動態的，適合其中的內容(所以答案的高度是固定的)..

& ltmain & gt元素允許比視口更寬，但標頭始終是視口寬度。 我不添加最大寬度的原因:100%；overflow-x: auto在& ltmain & gt元素(像這樣回答，是因為水平滾動出現在元素的底部，然后說一個人正在閱讀第一個塊，你希望水平滾動，你必須滾動到主元素的底部才能看到水平滾動條，滾動到一邊，然后再向上滾動。如果主屏幕比視口寬，我希望水平滾動條總是出現。

我已經嘗試了位置:粘/固定在標題上，但不能讓它工作。

如果可能的話，我寧愿不使用JavaScript。

header {
  padding: 32px;
  background: gray;
  width: 100%;
}
main {
  border: 2px solid lime;
  min-width: 100%;
}
div {
  height: 200px;
  width: 120%; /* make it overflow horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid red;
}

<header>The Header should not scroll horizntally<br>(is dynamic height)</header>
<main>
  <div>content 1</div>
  <div>content 2</div>
  <div>content 3</div>
  <div>content 4</div>
  <div>content 5</div>
  <div>content 6</div>
</main>

我在這里做的是讓標題粘在屏幕的左邊。它的父元素必須知道內容的大小，以允許標題移動。所以我將body的最小寬度設置為最小內容，并與main相同，這樣它就可以將其子元素的大小傳遞給body。

你也可能注意到我使用了框尺寸:邊框；在頭中，計算元素大小時會考慮其so填充大小(在本例中為100vw)。你不想在頁眉寬度上使用%,因為它沒有滑動的空間。

此外，div大小不能依賴于父大小，所以在這里也不能使用%。

body{
  min-width: min-content;
}

header {
  box-sizing: border-box;
  position: sticky;
  left: 0;
  padding: 32px;
  background: gray;
  width: 100vw;
}
main {
  min-width: min-content;
  border: 2px solid lime;
}
div {
  height: 200px;
  width: 120vw; /* make it overflow horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid red;
}

<body>

<header>The Header should not scroll horizntally<br>(is dynamic height)</header>
<main>
  <div>content 1</div>
  <div>content 2</div>
  <div>content 3</div>
  <div>content 4</div>
  <div>content 5</div>
  <div>content 6</div>
</main>
</body>

編輯:@Max Tuzenko的回答更好，因為它不需要額外的標記。我們走的是同一條路，但我甚至沒有想到不檢查就離開。我會留下我的答案，因為它解釋了一些事情。

如果您愿意將標題內容包裝在另一個元素中，可以使用position: sticky來實現這一點。這里有一個警告，你不能像在你的演示中那樣強制百分比溢出。但我猜這只是為了示范的目的？

這個想法是將你的標題擴展到你最寬的內容元素的寬度，讓里面的包裝器只沿著x軸，并且限制它的寬度為視窗寬度(100vw)。

為此，我們首先需要告訴body擴展到視口寬度之外，默認情況下它不會這樣做。至于為什么，請看這個問題及其答案。我們選擇最小寬度:最小內容。

我不太確定為什么強制百分比溢出不會觸發& ltmain & gt超出了視窗的限制，但是我想百分比是相對于包含元素而言的。

無論如何，請看下面的代碼片段作為工作示例。有些& quot顛簸& quot由于添加了邊框而發生。

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  min-width: min-content; /* Have body extend past viewport. */
  padding: 0;
}

header {
  border: 2px solid blue;
}

header div {
  background: gray;
  left: 0;
  max-width: 100vw; /* Restricting width to viewport width. */
  padding: 32px;
  position: sticky;
  top: 0;
}

main {
  border: 2px solid lime;
}

main div {
  align-items: center;
  border: 2px solid red;
  display: flex;
  height: 200px;
  justify-content: center;
  width: 120vw; /* Horizontal overflow, can't use pecentages. */
}

<header>
  <div>
      The Header should not scroll horizntally<br>(is dynamic height)<br>more lines
  </div>
</header>
<main>
  <div>content 1</div>
  <div>content 2</div>
  <div>content 3</div>
  <div>content 4</div>
  <div>content 5</div>
  <div>content 6</div>
</main>