将 flex 拉伸到高度但滚动内部内容
我找不到任何适合我的问题的东西。
我有一个弹性容器和两个固定宽度的左右列以及中间的可扩展内容。当中间内容太多时，我需要中间内容获得自己的垂直滚动条，但它目前只能水平工作。
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回答
-
有只小跳蛙
我将你的全容器更改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>
随时随地看视频慕课网APP
相关分类
Html5