html - 如何使水平和垂直滚动出现在浏览器中?溢出 : auto; doesn't work

标签 html css

我知道我可以将下面的样式放在 CSS 文件中,但那是以后的事。
如果在固定/可变宽度的 center 部分有任何内容(红色),你能帮忙制作一个滚动条吗?在某些情况下,用户的屏幕可能比内容小,但奇怪的是没有出现滚动条。

<html>
    <body>
    <div id="header" style="background: #555;margin: 0px; padding 0px; position: fixed; top: 0px; left: 0px; width: 100%;min-width: 900px; height: 50px;overflow: auto;">
    </div>

    <div id="menu" style="background: #444;margin: 0px; padding 0px; position: fixed; top: 50px; left: 0px; width: 200px; height: 100%;overflow: auto;">
    </div>

    <div id="center" style="background: #666;margin: 0px; padding 0px; position: fixed; top: 50px; left: 200px; width: 100%;min-width: 900px; height: 500px;overflow: auto;">
        <div style="width: 600px; height: 300px; background: red;overflow: auto;">
        </div>
    </div>

    <div id="footer" style="background: #777;margin: 0px; padding 0px; position: fixed; bottom: 0px; right: 0px; width: 100%;min-width: 900px; height: 50px;overflow: auto;">
    </div>
    </body>
</html>

最佳答案

滚动条不显示的原因是 #center div 的位置固定。

这是我相信你追求的东西的 fiddle :http://jsfiddle.net/qgeLp1jn/

#content div中,改变它的宽度使滚动条出现

#content {
    width: 500px;
    height: 300px;
    background: red;
}

关于html - 如何使水平和垂直滚动出现在浏览器中?溢出 : auto; doesn't work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28017591/

相关文章:

javascript - div slider 不工作

css - 为开发和生产设置背景图像路径的正确方法?

html - 垂直居中对齐的图像比顶部更靠近底部

android - Android平板电脑横向和桌面屏幕分辨率的CSS问题

css - 它是如何完成的 - Tweet-Button 计数器的缩放

html - HTML 中的换行符/空格会影响页面的显示方式吗?

css - Chrome 的全屏 Canvas ?

html - 框阴影未显示或 z-index

php - 在数据库中插入数据后隐藏div

html - 如何摆脱表中的 "red zone"?