Html 溢出-x滚动不工作_Html_Css

Html 溢出-x滚动不工作

html css

Html 溢出-x滚动不工作,html,css,Html,Css,我有2个文件，x-scroll.html和scroll_table.html，需要使用iframe包含另一个文件。我需要在页脚后，而不是页脚前的水平滚动条。感谢你的回答 x-scroll.html==> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Scroll-x overflow test</title>

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

x-scroll.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>


Scroll-x溢出测试
html，正文{
宽度：100%；
身高：100%；
溢出：隐藏；
边际：0px；
}
部门内容{
宽度：100%；
身高：90%；
溢出：隐藏；
边际：0px；
} 
.页脚{
背景色：#ffffcc；
文本对齐：居中；
}
滚动条测试

滚动_table.html==>

滚动条将位于div

容器的末尾。我建议您将表格包装为一个div并进行此滚动
<div class="wrap-table">
    <table id="single" class="table table-bordered" cellspacing="0">
    ...
    </table>
</div>

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


...
.包桌子{
宽度：100%；
溢出：滚动；
}

请附上一份。谢谢你的建议，谭。