- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我刚开始使用网格布局,并注意到它在相同的视口(viewport)大小上呈现不同:
(1) 最大化窗口的初始显示,这里没什么特别的:
(2) 使用 调整浏览器窗口大小后按钮左侧边栏中的文本被换行:
(3) 在不改变大小的情况下刷新浏览器窗口后,去掉左侧边栏中的换行:
注意左侧边栏中的文本突然不再换行,而视口(viewport)大小仍然相同!
怎么可能? 我在 Windows 上使用 Chrome 89.0.4389.82(最新稳定版)。使用 Firefox 86 我也有奇怪的大小调整效果(在小窗口上换行,并且在最大化时换行不会被删除)。想知道两个主要浏览器在简单网格上会出现错误吗?我做错了什么/失踪了吗?
使用的 CSS/HTML:
<style type="text/css">
body {
height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto minmax(0, 1fr);
}
header {
background-color: #add790;
text-align: center;
grid-column: span 2;
}
nav {
background-color: orange;
overflow: auto;
padding: 1em;
}
article {
overflow: auto;
padding: 1em;
}
</style>
<header>
<h1>Title</h1>
</header>
<nav>
<p>Navigation</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
</nav>
<article>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
</article>
更新 : 添加了
nav > p { min-width: max-content; }
规则:
width: fit-content;
导航:
最佳答案
没什么奇怪的,第一列设置为auto
( grid-template-columns: auto ...
) 如此描述 here它的行为如下:
auto
As a maximum represents the largest max-content size of the items in that track.As a minimum represents the largest minimum size of items in that track (specified by the min-width/min-height of the items). This isoften, though not always, the min-content size.If used outside of minmax() notation, auto represents the range between the minimum and maxium described above. This behaves similarlyto min-content(min-content,max-content) in most cases.
nav > p { min-width: max-content; }
可以轻松修复“怪癖”
OS: Ubuntu 20.04.2 LTS
Browser-1: Firefox 85.0.1 (64-bit)
Browser-2: Chromium Version 89.0.4389.72 (Official Build) snap (64-bit)
1a. initial maximized
window
1b. initial maximized
iframe
2a. initial minimized
window
2b. initial minimized
iframe
3a. maximize
window
3b. maximize
iframe
4a. minimize
window
4b. minimize
iframe
5 .
overflow: scroll
(in place ofoverflow: auto
, in all above scenarios)
max-content
与场景相关的行为:
Chromium
fixes wrapping in (
4b
)no effect in (
5
)Firefox
fixes wrapping in (
2a
,2b
,3a
,3b
,4a
,4b
)no effect in (
5
)
padding
nav
中的问题相关场景:
Chromium
no right padding in (
4b
)double right padding in (
3a
,3b
), i.e. CSS padding1em
+ scrollbar width~17px
no issues in (
5
)Firefox
no right padding in (
2a
,2b
,3a
,3b
,4a
,4b
)no issues in (
5
)
5
)中不存在问题,即滚动条始终可见时,尽管这种解决方案不是很吸引人。
load
之间不同行为的解释对比
resize
可能如下:
On
load
, since the size of window is known and nothing is rendered yet, content (width+padding+scroll+border) is accommodatedrecursively as many times as needed till fits the geometry withminimal performance penalties.On
resize
, when content is already on screen, subsequent layout shifts are rendered in frames to accommodate the new geometry (notethat application resize is a feature controlled by OS, not to beconfused withwindow
resize
), so during resize, when browserengine detects an overflow, the containernav
may have no enoughspace to fit scrollbar, and although there is plenty of space in theadjacent container, to avoid a reflow avalanche (which requireconsiderable processing resources and lack of these cause visualartifacts), the space for scrollbar is taken from that context.
resize
window
上的事件并进一步触发内容重排,对于这里的简单布局,切换
overflow: initial
代替
overflow: auto
就足够了,更复杂的布局可能需要更激进的样式,例如
width: 0 !important
, 用于最终控制
resize observer
可用于特定目标,仅在该上下文中触发回流。
- Add CSS rule
nav > p { min-width: max-content; }
- Add CSS rule
.reflowing * { overflow: initial; }
- Attach
resize
event listener on window which will toggle the class.reflowing
ondocument.body
for a period long enough togenerate a content reflow, onerequestAnimationFrame
(~16ms) seemsto be enough here.
const initReflow = el => requestAnimationFrame(() => {
el.classList.add('reflowing');
requestAnimationFrame(() => el.classList.remove('reflowing'));
});
addEventListener('resize', () => initReflow(document.body));
body {
background: white;
height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto minmax(0, 1fr);
}
header {
background-color: #add790;
text-align: center;
grid-column: span 2;
}
nav {
background-color: orange;
overflow: auto;
padding: 1em;
}
article {
overflow: auto;
padding: 1em;
}
nav > p {
min-width: max-content;
}
.reflowing * {
overflow: initial;
}
<header>
<h1>Title</h1>
</header>
<nav>
<p>Navigation</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
</nav>
<article>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
<p>Here too there should be a local scrollbar.</p>
</article>
关于html - 刷新和调整浏览器窗口大小时网格布局呈现不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66572128/
我是 Javascript 新手,所以请原谅基本代码。有什么方法可以让我使用用户输入的指定调整来打印代码? height: width: 最佳答案 为按钮
我有一个带有 A 框架的场景,我正在使用方法 getCanvas 来获取屏幕截图并将其发送到 PHP。有没有办法调整 getCanvas 图像大小?因为默认的是 4096x2048,我需要它更小。如果
安排自动“分析表”的方法是什么。当大量数据通过插入和删除发生更改时,是否可以请求自动“分析表”?参数化自动分析表过程的方法是什么,即设置何时应该触发的规则。 最佳答案 您使用的是哪个版本的 Oracl
我只是想说,我是 C 语言的新手。好吧,除此之外,我在圣诞假期的任务是编写一个以各种方式操作 PNG 图像的程序。我已经完成了大部分事情,但是在尝试编写放大图像的程序时遇到了问题。我已经尝试过了,并且
在 Postgres 中编写更快查询的有效方法是什么?请不要包括一般良好的数据库实践(例如使用索引或规范化)。我正在寻找像派生表比子查询工作得更快或使用 python 字符串函数似乎比 pgsql 字
我不知道自己做了什么,但我要么将页眉和导航向右移动,要么将页面的其余部分向左移动。使用 tw Bootstrap 。我想不通。我对它进行了调试并查看了我的 css 编辑,没有看到任何负边距(我怀疑是这
我希望能够增加默认字体大小,但只能在特定的 DIV 内。 很明显,这似乎正是 ems 所针对的那种情况。我的问题是我只想增加字体大小,而不影响使用em设置大小的其他内容,例如填充和边距。 这可能看起来
我正在我的大学上数据挖掘类(class)。我真的不明白这个问题。谁能帮我理解一下? 最佳答案 重要性权重让您了解在采样时找到特定数据点的频率。您可以使用它来增加训练数据集。例如,如果您只有两个数据点:
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我的部分程序如下所示: char *argVector[] = {"./doTasks","0", "1", "3", NULL}; int numChild = 3; int temp; char
我在调整 QWindow 大小时观察到一个奇怪的行为。当我调整窗口大小时使宽度和高度都增加或减少时,窗口不会以白色背景闪烁。但是当我增加宽度同时减小高度(或反之亦然)时,窗口会闪烁并暂时用白色填充新的
我在使用 ggplot2 创建图形时遇到问题。我正在使用带有中心堆叠的 geom_dotplot 来显示我的数据,这些数据是 4 个类别的离散值。 出于审美原因,我想自定义点的位置,这样 沿 y 轴减
在尝试让我的 Canvas/Stage 调整大小并使其正确适合父容器时遇到一些问题。我发现了其他类似的帖子,虽然答案确实帮助我获得了新的屏幕尺寸,但它仍然不想适应容器,而是直接进入屏幕的边缘(这在示例
我想将路径大小调整为 20 像素左右。 SVG 的大小应为 500 * 500,现在路径宽度为 297,高度为 180.7。现在我需要这条路径,其宽度为 277,高度为 160.7,在之前的路径中。
我有一个矩形 svg,可以围绕二维平面拖动,围绕它自己的原点旋转并调整大小。 class SVG extends React.Component { constructor(props) {
我一直在尝试调整 MLP 模型的超参数来解决回归问题,但我总是收到收敛警告。 这是我的代码 def mlp_model(X, Y): estimator=MLPRegressor() param_gr
我正在创建一个聊天应用程序,我希望 ScrollView 的内容位于输入字段下方(向上滚动时)。我已经将 ScrollView 和输入字段放在 ZStack 中。 ScrollView 上的底部填充使
我遇到 GC 来不及删除空闲对象的情况。该代码将一个大文档加载到内存中并循环处理它。如果我在此循环中停止(在 Debug模式下)或添加 GC.Collect(),内存使用量将下降到 70 MB 以下。
我正在使用 iTextSharp 和 PdfSharp 的组合来组装一个大型 PDF 文件,以便打印到 Canon Oce VarioPrint 6000 系列打印机。 PDF 正在替换后记文件。 这
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
我是一名优秀的程序员,十分优秀!