我找不到任何適合我的問題的東西。我有一個彈性容器和兩個固定寬度的左右列以及中間的可擴展內容。當中間內容太多時，我需要中間內容獲得自己的垂直滾動條，但它目前只能水平工作。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 關注
- 108 瀏覽
添加回答
舉報
0/150
提交
取消