色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

使元素不水平滾動(dòng)

CSS

我正在嘗試用以下內(nèi)容進(jìn)行布局:

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

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

我已經(jīng)嘗試了位置:粘/固定在標(biāo)題上，但不能讓它工作。

如果可能的話，我寧愿不使用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>

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

你也可能注意到我使用了框尺寸:邊框；在頭中，計(jì)算元素大小時(shí)會(huì)考慮其so填充大小(在本例中為100vw)。你不想在頁(yè)眉寬度上使用%,因?yàn)樗鼪](méi)有滑動(dòng)的空間。

此外，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的回答更好，因?yàn)樗恍枰~外的標(biāo)記。我們走的是同一條路，但我甚至沒(méi)有想到不檢查就離開(kāi)。我會(huì)留下我的答案，因?yàn)樗忉屃艘恍┦虑椤?/p>

如果您愿意將標(biāo)題內(nèi)容包裝在另一個(gè)元素中，可以使用position: sticky來(lái)實(shí)現(xiàn)這一點(diǎn)。這里有一個(gè)警告，你不能像在你的演示中那樣強(qiáng)制百分比溢出。但我猜這只是為了示范的目的？

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

為此，我們首先需要告訴body擴(kuò)展到視口寬度之外，默認(rèn)情況下它不會(huì)這樣做。至于為什么，請(qǐng)看這個(gè)問(wèn)題及其答案。我們選擇最小寬度:最小內(nèi)容。

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

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

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>