英文:
How to Enable Scrolling for Overflowing Content in a CSS Grid Layout?
问题
你好，以下是翻译好的部分：
我目前正在进行一个HTML/CSS项目，其中我有一个三列网格布局。左列包含一个类似终端的界面，其中包括一个输出区域和一个输入区域。输出区域（<div id="output" class="output-buffer">）包含段落文本，通常超出可用的垂直空间。
这是我的代码的简化版本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Game Client</title>
</head>
<style>
html,
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.three-columns {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.split {
height: 100%;
width: 100%;
}
.horizontal-gutter {
height: 100%;
width: 20px;
background-color: black;
}
.terminal {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 1fr auto;
background-color: rgb(46, 46, 46);
font-family: "Roboto Mono", monospace;
font-size: 16px;
overflow: hidden;
}
.output-buffer {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: auto;
color: white;
}
.input-wrapper {
width: 100%;
display: grid;
grid-template-columns: auto 1fr;
background-color: rgb(69, 64, 64);
padding: 5px;
}
.command-input {
height: 100%;
width: 100%;
background-color: rgb(69, 64, 64);
border: none;
color: white;
font-family: "Roboto Mono", monospace;
font-size: 16px;
}
</style>
<body>
<div id="main" class="three-columns">
<div id="split-1" class="split">
<div class="terminal">
<div id="output" class="output-buffer">
<p>This is an output buffer that is expected to have scrollbars on this div when the content exceeds its size. Instead it expands. 😒</p>
<!-- Repeated content will be generated here by JavaScript -->
</div>
<div id="input" class="input-wrapper">
<input id="command-input" type="text" placeholder=""> command" autocomplete="off" class="command-input" />
</div>
</div>
</div>
<div class="horizontal-gutter"></div>
<div id="split-2" class="split">
<div style="background-color: rgb(72, 0, 0); height: 100%; width: 100%;" />
</div>
</div>
<script>
// Get the output buffer element
var outputBuffer = document.getElementById('output');
// Generate many paragraphs of psuedo-content
// to overflow the output buffer and show the problem
for (var i = 0; i < 50; i++) {
var p = document.createElement('p');
p.textContent = 'All your base are belong to us!';
outputBuffer.appendChild(p);
}
</script>
</body>
</html>
我希望output-buffer div在内容不适合时具有适当的滚动条。然而，它没有显示滚动条，而是扩展其大小。
我尝试在output-buffer上使用overflow: auto;和height: 100%;，但它不起作用。它不会使div可滚动，而是扩展其大小。至少在垂直方向上（有时取决于不同的方法），过宽的内容会提供预期的水平滚动条（缩小浏览器窗口宽度以查看此内容）。
我该如何修改我的CSS，以使output-buffer在内容溢出时可滚动，而不会扩展其大小？
非常感谢您的帮助！提前感谢。
英文:
Hello StackOverflow Community,
I'm currently working on a HTML/CSS project where I have a 3 column grid layout. The left column contains a terminal-like interface with an output area and an input area. The output area (<div id="output" class="output-buffer">) contains paragraphs of text that often exceed the available vertical space.
Here's a simplified version of my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Game Client</title>
</head>
<style>
html,
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.three-columns {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.split {
height: 100%;
width: 100%;
}
.horizontal-gutter {
height: 100%;
width: 20px;
background-color: black;
}
.terminal {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 1fr auto;
background-color: rgb(46, 46, 46);
font-family: "Roboto Mono", monospace;
font-size: 16px;
overflow: hidden;
}
.output-buffer {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: auto;
color: white;
}
.input-wrapper {
width: 100%;
display: grid;
grid-template-columns: auto 1fr;
background-color: rgb(69, 64, 64);
padding: 5px;
}
.command-input {
height: 100%;
width: 100%;
background-color: rgb(69, 64, 64);
border: none;
color: white;
font-family: "Roboto Mono", monospace;
font-size: 16px;
}
</style>
<body>
<div id="main" class="three-columns">
<div id="split-1" class="split">
<div class="terminal">
<div id="output" class="output-buffer">
<p>This is an output buffer that is expected to have scrollbars on this div when the content exceeds its size. Instead it expands. 😒</p>
<!-- Repeated content will be generated here by JavaScript -->
</div>
<div id="input" class="input-wrapper">
<input id="command-input" type="text" placeholder="> command" autocomplete="off" class="command-input" />
</div>
</div>
</div>
<div class="horizontal-gutter"></div>
<div id="split-2" class="split">
<div style="background-color: rgb(72, 0, 0); height: 100%; width: 100%;" />
</div>
</div>
<script>
// Get the output buffer element
var outputBuffer = document.getElementById('output');
// Generate many paragraphs of psuedo-content
// to overflow the output buffer and show the problem
for (var i = 0; i < 50; i++) {
var p = document.createElement('p');
p.textContent = 'All your base are belong to us!';
outputBuffer.appendChild(p);
}
</script>
</body>
<!-- end snippet -->
My intention is for the output-buffer div to have appropriate scrollbars when the content doesn't fit. However, instead of showing a scrollbar, the div just expands its size to accommodate the extra content.
I've tried using overflow: auto; and height: 100%; on the output-buffer, but it doesn't work as expected. Instead of the div becoming scrollable, it just expands its size. At least in the vertical as (sometimes, depending on different approaches) too-wide content does provide a horizontal scrollbar as expected (shrink browser window width to see this).
How can I modify my CSS so that the output-buffer becomes scrollable when the content overflows, and doesn't expand its size?
Any help would be greatly appreciated!
Thank you in advance.
答案1
得分: 0
使用 overflow-y: auto; 是添加滚动的正确方法，现在您只需要设置一个最大高度。当前情况下，当 div 变得太大时，它无法添加滚动，因为它不知道什么是"太大"。
尝试类似于-
.output-buffer {
max-height: 400px; /* 将此值更改为您想要的高度 */
}
编辑：如果必须动态调整大小，请尝试使用视口高度而不是像素，像这样-
.output-buffer {
max-height: 95vh; /* 根据需要进行调整 */
}
英文:
Using overflow-y: auto; is the right thing to do to add scrolling, now you just need to set a max-height. Right now it can't add scrolling when the div gets too big, because it doesn't know what "too big" is.
Try something like-
.output-buffer {
max-height: 400px; /* change this to whatever height you want */
}
Edit: If it has to be dynamically sized, try view height instead of pixels, like this-
.output-buffer {
max-height: 95vh; /* adjust this as needed */
}
答案2
得分: 0
基本问题是网格布局在处理嵌套的 div 和溢出时行为奇怪。这可能是设计上的问题，或者在浏览器实现方面存在一些灰色地带。我找不到任何规范表明这是正确的迹象。
要实现正确的行为，可以使用弹性布局而不是网格布局。这似乎可以很好地处理内部 div 的溢出。
英文:
The fundamental problem is that Grid layout has an odd behavior when it comes to nested divs and overflow. This might be by design or a gray area in terms of implementation in browsers. I can find no spec that suggests this is correct so far.
The achieve the proper behavior, use flex layout instead. This seems to respect overflow of inner divs just fine.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论