css - 溢出：自动无法正常工作

问题描述

我希望这个页面有一个固定的顶部和一个底部来填充剩余的视口。底部将用于显示jpg。当 jpg 太大时，我希望滚动条只出现在底部。我已经尝试了我认为 3 个 div 的固定和绝对的所有组合，但没有一个组合能够提供我正在寻找的功能。下面的代码在需要时显示水平滚动条，而不是垂直滚动条。任何帮助都会很棒。这是我所拥有的：

<body>

    <style>
    
            body
            {
                margin: 0;
                padding: 0;
                border: 0;
            }
    
            #Top
            {
                position: fixed;
                left: 0;
                top: 0;
                height: 200px;
                width: 100px;
                background: red;
            }
            
            #Bottom
            {
                position: fixed;
                top: 200px;
                width: 100%;
                background: green;
                overflow: auto;                 
            }
            
            #Content
            {
                width:100%;
                height: 100%;
                background: purple; 
                overflow: auto;                 
            }
            
    </style>

<body>
    <div id="Top">
    </div>
    
    <div id="Bottom">
        <div id="Content">
            <!-- This is just a blue box that should cause scroll 
            bars to appear when the viewport is resized too small.-->
            <img src="Blue500x1000.jpg">  
        </div>
    </div>
    
</body>

标签： cssoverflow

css - 溢出：自动无法正常工作

问题描述

解决方案

推荐阅读