html - 如何让我的表格滚动,而背景在 html/css 中保持固定?

标签 html css scroll scrollbar

我有一个个人网页,其中我的所有内容都加载到一个表格中,表格中设置了背景颜色居中,而实际背景是图像。表格中的内容太多,我无法在不滚动的情况下将其全部放入窗口 View 中,但我的滚动条没有显示出来。我想向下滚动页面,但不允许。我尝试在 html 标记中扩展文档的高度,但这只会向下滚动背景图像,而不会向下滚动表格。有什么建议吗?

无论我走到哪里,总会有一些关于将样式设置为 overflow:auto 或类似设置的建议,但这从来没有奏效。这是 HTML 和 CSS

<body style="background-image:url(assets/images/bckg1.jpg); background-     
position:center; background-repeat:repeat;">
<br />
<div style="overflow:auto; position:fixed; display:block;">
<table id="scrollable-table" class="main-content" border="3" cellspacing="0" cellpadding="20">`

html {
    margin: 0;
    padding: 0;
    }
body { 
    overflow:hidden; 
    font: 75% georgia, sans-serif;
    line-height: 1.88889;
    color: #555753; 
    margin: 0; 
    padding: 0;
    }
.main-content {
    position: fixed;
    left:25%;
    right:25%;
    width:50%;
    background: #D2F0FF;
    border-left:groove;
    border-right:groove;
    border-color:#0066FF;
}

#scrollable-table, tbody{
    display:block;
    overflow-y:auto;
/*  position:fixed;*/
}

有没有简单的解决方案?也许是 js 或 jquery 解决方案?

最佳答案

如果您将“高度”添加到#scrollable-table - 您将能够滚动。

#scrollable-table, tbody{
    height: 100%;
    display:block;
    overflow-y:auto;
    /*  position:fixed;  */
}

http://jsfiddle.net/pk4s7tss/2/

关于html - 如何让我的表格滚动,而背景在 html/css 中保持固定?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28523139/

相关文章:

html - 使用页眉和页脚 div 重叠中间内容

javascript - 如何将表单数据从外部html文件发送到django?

css - 带有图像背景和文本的按钮

python - 通过滚动在 TreeView 中搜索

jquery - localScroll 并缓解滚动问题

html - DOM 中有很多 &nbsp,但源代码中没有

HTML 表格占据页面 100% 以上

css - 六边形图案不适用于 ems?

css - 在文本中选择看起来不错的选项

javascript - 当双击广告位于 Flash 中时,自定义滚动无法在 Chrome Mac 上正常工作