我找不到任何适合我的问题的东西。我有一个弹性容器和两个固定宽度的左右列以及中间的可扩展内容。当中间内容太多时，我需要中间内容获得自己的垂直滚动条，但它目前只能水平工作。https://jsfiddle.net/pLerox7f/HTML：<!doctype html><html> <body> <div class="full-container"> <div id="col1"> hello </div> <div id="col2"> <div> this content scrolls horizontally correctly but not vertically </div> <div> <canvas id="canvas" width="800" height="600"></canvas> </div> <div> other content </div> </div> <div id="col3"> right content </div> </div> <div class="footer"> footer </div> </body></html>CSS：body{ height: 100%; overflow: hidden;}.full-container { display: flex; margin: 0; padding: 0; min-height: calc(100vh - 32px);}.footer{ background-color: red; width: 100%; height: 32px; text-align: center;}#col1 { background-color: darkgray; flex: 0 0 230px;}#col2 { background-color: aliceblue; flex: 1 1 auto; margin: 1px; padding: 4px; overflow: auto;}#col3 { background-color: dimgray; flex: 0 0 230px;}在此示例中，如果您减小窗口高度，则会将页脚向下推，而不是创建滚动条。有什么解决办法吗？谢谢。
1 回答
有只小跳蛙
TA贡献1824条经验 获得超8个赞
我将你的全容器更改min-height为， 一切height都按你想要的方式运行
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
body{
height: 100%;
overflow: hidden;
}
.full-container {
display: flex;
margin: 0;
padding: 0;
height: calc(100vh - 32px);
}
.footer{
background-color: red;
width: 100%;
height: 32px;
text-align: center;
}
#col1 {
background-color: darkgray;
flex: 0 0 230px;
}
#col2 {
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: aliceblue;
flex: 1 1 auto;
margin: 1px;
padding: 4px;
overflow: auto;
}
#col3 {
background-color: dimgray;
flex: 0 0 230px;
}
<!doctype html>
<html>
<body>
<div class="full-container">
<div id="col1">
hello
</div>
<div id="col2">
<div>
this content scrolls horizontally correctly but not vertically
</div>
<div>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<div>
other content
</div>
</div>
<div id="col3">
right content
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
- 1 回答
- 0 关注
- 82 浏览
添加回答
举报
0/150
提交
取消