html - overflow-x 滚动不工作

标签 html css

我有 2 个文件,x-scroll.html 和 scroll_table.html,需要使用 iframe 来包含另一个文件。我需要页脚之后的水平滚动条,而不是页脚之前的水平滚动条。 感谢您的回答!!

x-滚动.html ==>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scroll-x overflow test</title>
    <style>
        html, body{
          width:100%;
          height:100%;
          overflow:hidden;
          margin:0px;   

        }

        div.content{
          width:100%;
          height:90%;
          overflow:hidden;
          margin:0px;   

        } 

        .footer{
            background-color: #ffffcc;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="content">  

        <iframe name="main" src="scroll_table.html" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto"></iframe>

    </div>
    <div class="footer">
        <p>Scroll bar test</p>
    </div>
</body>
</html>

滚动表.html ==> https://codepen.io/klim1167/pen/odNgLW

最佳答案

滚动条将在 divcontainer 的末尾。我建议您将 table 包装到一个 div 中并进行滚动

<div class="wrap-table">
    <table id="single" class="table table-bordered" cellspacing="0">
    ...
    </table>
</div>

.wrap-table {
  width: 100%;
  overflow: scroll;
}

https://codepen.io/anon/pen/aGbzKW

关于html - overflow-x 滚动不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49890969/

相关文章:

javascript - 如何将图像分割成图 block ?

javascript - 当用户单击某个元素并使用 javascript 在其所在位置显示另一个元素时,如何从我的网页中删除该元素

html - 为什么 method=PUT 从 HTML5 的表单元素中移除?

javascript - 带有光标 Javascript 的自动打字机

类(class)中每隔一个奇数 div 的 CSS 奇数

html - 页面底部的正文背景和页脚

javascript - Html.ActionLink 在 html 选项标签中不起作用

html - CSS 第 n 个子选择器

javascript - 将事件类添加到 jquery 下拉菜单

css - 两种颜色的文字