下面的代码是实际代码的简化版本，但它“正确地”显示了问题--我有一个T型布局的窗口。顶部有工具栏，左下方有一些长的内容，右边应该占用剩余的空间。
我使用“绝对”位置为左窗格，因为我的第一个问题是如何滚动窗格内的长内容，这是我发现的，所以我使用它。
在右边有ChartJs，最初它确实占用了剩余的空间，但如果我将鼠标移到它上面，它会刷新内容，导致左窗格被压成零。
如何防止这种情况（不使用硬编码大小，如“min-width：200 px”）？随着左右窗格大小的变化，我的意图是“左--取所有必要的，右--取其余的”。
代码：
<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
</head>
<body style="background-color: pink; overflow:hidden;margin:0" onload="starter()">
<div style="display: flex;flex-direction:column; height: 100vh;width: 100%">
<!-- TOOLBAR -->
<div style="flex-shrink: 0; flex-grow: 0;">
<button>hello</button>
</div>
<div style="flex-shrink: 0; flex-grow: 1;
display: flex;flex-direction:row; ">
<!-- LEFT PANE -->
<div style="position:relative; background-color: aqua; overflow:scroll;
flex-shrink: 0; flex-grow: 1;">
<div style="position:absolute; width: 100%">
<div>
<h1>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>4</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>1</li>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>4</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>0</li>
</ul>
</h1>
</div>
<div>left</div>
</div>
</div>
<!-- RIGHT PANE -->
<div style="background-color: green; flex-shrink: 0; flex-grow: 1;
display: flex;flex-direction:column;">
<div style="position: relative;flex-shrink: 1; flex-grow: 1;">
<canvas id="bar-chart" style="" ></canvas>
</div>
<div style="flex-shrink: 0; flex-grow: 0;">right</div>
</div>
</div>
</div>
<script>
function starter(){
// https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}]
},
options: {
maintainAspectRatio : false,
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
}
</script>
</body>
</html>
1条答案
按热度按时间ohfgkhjo1#
所以我从最初的问题开始--如何使用剩余空间并在那里启用滚动？对于两个窗格，Flex布局有很好的解决方案：https://stackoverflow.com/a/68516470/210342，但在我的例子中，当我有嵌套的窗格时，我不能使flex占用整个窗口和仅窗口空间（如果不使用绝对位置的hack）。
因为我不知道CSS，我尝试了网格方法，它工作的权利现场。我只是添加了“高度：100 vh”为整个网格容器和给定的滚动窗格“溢出：自动”，这就是它。
现在我有滚动和大小良好的图表。
不错的网格发电机我用：https://cssgrid-generator.netlify.app/