下面的代码是实际代码的简化版本，但它“正确地”显示了问题--我有一个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/

赞(0）回复(0）举报 2022-11-06

如何防止ChartJs挤压flexbox绝对窗格？

1条答案

相关问题

热门标签

最新问答