CSS / JS 仅将其中一个 div resize/scroll 设为固定页脚

Question

已解决：感谢大家的帮助！

下面的代码片段显示了我的问题在解决之前的样子。无论我做了什么 CSS 编辑，div "words" 都无法滚动。我只想要正文中的 div "words" 来滚动页眉和页脚之间的全部内容。

Answer 1

这里的问题是 "words" 超出了页面底部。要像在 div 标签上那样滚动，你需要给它一个静态高度，否则，div 会自动调整到它内容的高度，并且表现得像一个正常的 div标签。

要使其响应，您需要在 javaScript 中使用 screen.height; 来获取总屏幕高度，然后减去页眉和页脚区域的高度，然后设置 div 标签的高度使用结果。为获得最佳效果，请使用 window.setInterval(setWordsHeight(), 100); 之类的东西每隔一段时间重新检查屏幕的高度，这样如果有人调整 window.

的大小，它就不会弄乱

var headerFooterHeight = 200; 
window.setInterval( function(){
    document.getElementById("words").style.height = (window.innerHeight - headerFooterHeight)+"px"; 
console.log(document.getElementById("words").style.height);
}, 100);

Answer 2

为 #content

删除 position: fixed;

#content {
 padding: 60px 0;
}

还有 overflow-y: hidden; 来自 body

html, body {
    height: 100%;
    margin: 0 auto;
    color: #4c4c4c;
    overflow-x: hidden;
    text-align: center;
}

最后从 .words

中删除 overflow-y: scroll;

.words {
 text-align: left;
 margin: 0 20px 0 20px;
}

这应该可以解决您的问题，如果有帮助请告诉我！

编辑 1

所以首先我们需要更新标记，让我们创建一个新容器 div 并给它 class .new-header，这需要在 [=17 之外=] div

<div class="new-header">
   <a class="hoverontouch" href="https://www.dollarresources.com">
      <div class="worldwide grow WorldWide">
      </div>
       </a>

        <div class="search-bar">
         <div class="search-button">
         <form action="search_keyword.php">
              <input type="text" name="keyword" placeholder="Search Dollar Resources..." required oninvalid="this.setCustomValidity('Please enter a search word or phrase')"
     oninput="setCustomValidity('')" autocomplete="off"  onfocus="this.placeholder = ''"
    onblur="this.placeholder = 'Search Dollar Resources...'">
              <button type="submit" value="Submit"><i class="fa fa-search"></i></button>
            </form>
    <?php

    // include "search_keyword.php";

    $mysqli->close();

    ?>
       </div>
      </div>
</div>

如您所见，在 .new-header div 中，您拥有第二个 header 所需的所有信息，然后您需要添加此 css

.new-header{
  position: fixed;
  top: 40px;
  width: 100%;
  background-color: #fff;
}

现在我们需要给 #content div 更多 padding-top

#content {
 padding: 170px 0 60px 0;
}

如果您在应用时遇到任何问题，请告诉我。

CSS / JS 仅将其中一个 div resize/scroll 设为固定页脚

CSS / JS make only one of the divs resize/scroll to fixed footer

javascript

html

css

scroll

fixed