CSS / JS 仅使其中一个 div 调整大小/滚动到固定页脚答案

【问题标题】：CSS / JS make only one of the divs resize/scroll to fixed footerCSS / JS 仅使其中一个 div 调整大小/滚动到固定页脚
【发布时间】：2019-04-17 20:26:05
【问题描述】：

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

下面的 sn-p 显示了我的问题在解决之前的样子。无论我做了什么 CSS 编辑，div“单词”都无法滚动。我只希望正文中的一个 div “单词”滚动而不是页眉和页脚之间的全部内容。

【问题讨论】：

我建议您使用 sn-p 功能并提供您的问题的工作示例。它将减轻帮助者的工作，并提高帮助你的帮助者的数量和质量。 :)
@JonathanGagne 感谢您的建议。我不知道如何使用 sn-p 功能。我现在就试试看
在编辑框工具栏中，有一个名为Snippet的按钮。单击它并将您的html 代码拆分为html 代码块，将css 代码拆分为css 部分，然后您可以通过单击Run 查看最终结果。如果结果让您满意，请点击Save 并在 sn-p 代码块之前和/或之后写下您的问题。
@JonathanGagne 我能够添加片段！感谢您的推荐 - 希望我现在能找到解决方案
我的荣幸！！！感谢您让 Stack Overflow 成为人们友善和聪明的更好居住地；）

标签： javascript html css scroll fixed

【解决方案1】：

这里的问题是“单词”超出了页面底部。要像在 div 标签上那样滚动，您需要给它一个静态高度，否则，div 会自动调整到其内容的高度，并且表现得就像一个普通的 div 标签。

为了让它响应，你需要在javaScript中使用screen.height;来获得你的总屏幕高度，然后减去你的页眉和页脚区域的高度，然后使用结果设置div标签的高度。为获得最佳效果，请使用 window.setInterval(setWordsHeight(), 100); 之类的内容每隔一段时间重新检查屏幕高度，以免有人调整窗口大小时弄乱。

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

【讨论】：

感谢您的建议@Nosjimiki。我对java不太精通。你能给我一个工作代码，我可以使用你的例子粘贴到我的代码中，这样我就可以测试它的响应能力了吗？
试试这个。您可能需要将“headerFooterHeight”重新调整为您的确切边距。此外，正如您所知，Java 和 JavaScript 是两种完全不同的编程语言。
这适用于所有浏览器吗？像我在@MartinBA的回答中那样添加第二个标题会更好吗？如果 javascript 在普通浏览器上不通用，我不希望用户遇到任何问题。（感谢您让我知道这两种语言是不同的）。
本示例中的所有内容都应该是跨平台兼容的。如果您的列表很长，第二个标题想法将成为问题。标题实际上并没有使滚动条变短，它只是隐藏了它的顶部；因此，如果您的列表很长，它将隐藏滚动条控制器并使其不可拖动；所以，我个人不建议这样做。
我在我的 html 中粘贴了 <script> var headerFooterHeight = 200; // Or whatever the total height of the header+footer is. function setWordsHeight(){ document.getElementById("words").style.height = (screen.height - headerFooterHeight)+"px"; } window.setInterval(setWordsHeight(), 100); // this makes it recheck the size of the window every 100ms. </script>，但它什么也没做

【解决方案2】：

删除position: fixed; 的#content

#content {
 padding: 60px 0;
}

还有来自body的overflow-y: hidden;

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 并给它类.new-header，这需要在#content 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 中，您拥有第二个标头所需的所有信息，然后您需要添加此 css

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

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

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

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

【讨论】：

好答案，但也要去掉overflow-y:scroll; from words 以免出现第二个无法使用的滚动条。
@MartinBA，首先感谢您的建议。这使得整个内容区域在页眉和页脚之间滚动。那不是我想要的。我只想要 div 类：滚动的单词。你能做到吗？
那么，你需要我的回答。你需要给你的 div 设置一个高度。
如果你想要，是的，你需要@Nosajimiki 的回答
@SCodeSK71 是的，我可以，工作缓慢，给我几分钟，我会编辑答案。