Javascript 如何控制HTML页面的布局，使正文在距底部x像素处停止？_Javascript_Html_Css

Javascript 如何控制HTML页面的布局，使正文在距底部x像素处停止？

javascript html css

Javascript 如何控制HTML页面的布局，使正文在距底部x像素处停止？,javascript,html,css,Javascript,Html,Css,我有以下代码： <body>  <div id="header"> </div>  <div id="content"> <table id="topic-content" style="height: 100%; width: 90%;" cellpadding="0" cellspacing="0" role="pr

我有以下代码：

<body>
<!-- Google Tag Manager -->

<div id="header">

</div>
<!--topic-content-->

<div id="content">
<table id="topic-content" style="height: 100%; width: 90%;" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
        <td style="height: 100%; vertical-align: top;" id="start-panel">
            <!--start-panel-->
                <table align="center">
                    <tr>
                        <td class="loading">
                          <script type="text/javascript">
                                var loading = "Loading...";
                                if(typeof resources != "undefined" && typeof resources != null){
                                    if (resources["Loading"] || resources["Loading"] != "") 
                                        loading = resources["Loading"]; 
                                }
                                                            document.write(loading);
                </script>
            </td>
        </tr>
                </table>
            </td>
        </tr>
        <!--footer--> 
    </table>
</div>

<!-- The configuration section -->
<div style="display: none;">

</div>


</body>


var load=“加载…”；
if（资源类型！=“未定义”&&typeof资源！=null）{
if（资源[“加载”]| |资源[“加载”]！=“”）
加载=资源[“加载”]；
}
文件。写入（加载）；

（已删除敏感信息），导入（通过javascript）HTML页面并在窗口中显示（如果有页眉，则显示在页眉下方），但问题是，如果添加页脚，它将继续在页脚下方流动。我怎样才能使节停在页脚上方

您的示例代码非常混乱。无论如何，我做了一个概念证明，符合您的要求。实际上，您必须有一个启用了滚动的容器和另一个元素来执行页脚角色

其想法是使用一个固定高度的容器（使用vh单位-垂直高度百分比）和其中的滚动内容。紧接着是一个固定高度的页脚

HTML

有关完整的解决方案，请参阅代码笔：

玩得开心

您是否尝试过

body{height:calc（100vh-50px）；overflow:auto；}

？请修复您的代码笔并发布生成的代码，为了演示，我们不需要等待JavaScript加载内容。另外，看看你的照片，你希望滚动条仅限于内容吗？我认为这是不可能的，除非你使用框架或iFrame，但我建议不要使用它们。注意这个解决方案是IE9+

<section>
  <div class="content">
   [All your content here]
  </div>
</section>

<footer>
  HI
</footer>

section {
  height: calc(100vh - 50px);
  overflow-y: scroll;
}

footer {
  height: 50px;
}