Css 使元素不水平滚动

发布于06月01日

我正在try 用以下方式进行布局:

页眉(代码段中的灰色块)
车身(石灰边框)
正文内容(带红色边框的块)

如果您水平滚动，则标题不应该滚动，它应该是全宽的并保持在可见范围内.如果您垂直滚动，则页眉应该像往常一样滚动到页面之外.页眉的高度是动态的，适合其中的内容(this SO answer适用于固定高度).

允许<main>元素比视区宽，但标题始终为视区宽度. 我之所以不在<main>元素上加上max-width: 100%; overflow-x: auto(比如this SO answer)，是因为元素的底部会出现水平滚动，然后假设一个人正在读取第一个块，而你想要水平滚动，你必须滚动到主元素的底部才能看到水平滚动条，滚动到一侧，然后再向上滚动.如果Main比视区宽，我希望水平滚动条始终存在.

我已try 在集线器上定位:粘滞/固定，但无法使其工作.

如果可能的话，我不希望使用Java脚本.

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{ 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>

Css 使元素不水平滚动

推荐答案

Css相关问答推荐

Angular中嵌套数组的网格

如何在CSS中平滑线性平移动画

指定from_max和to_min值时隐藏Shiny sliderTextInput下的行

如何为 MUI Slider 字段中 markLabel 的第一个和最后一个实例提供边距？

使用CSS Grid是否可以跳过下一列？

.SVG 文件对象在锚标签下可点击

来自 A 队和 B 队的类污染了同一个全局命名空间

Angular (13) material - 覆盖 CSS 文件不起作用

如何在每一行周围放置不同大小的阴影？

更改组件中 css 的值

使用之前和之后为锚标签添加画笔描边效果

CSS3 的：root 伪类和 html 有什么区别？

CSS 中的区域类似于 C# 区域？

如何通过单击
激活 HTML 链接？

表格的边框半径没有按预期工作

在 Twitter Bootstrap 中创建圆角的正确方法

在 CSS3 中重新启动动画：比删除元素更好的方法吗？

CSS 否定伪类：not() 用于父/祖先元素

bootstrap.css 和 bootstrap-theme.css 有什么区别？

我可以在 css 中指定 maxlength 吗？