固定页脚的最小高度 - 我使用了@media答案

【问题标题】：Minimum Height for Fixed Footer - I USED @media固定页脚的最小高度 - 我使用了@media
【发布时间】：2017-02-04 17:30:05
【问题描述】：

我有一个带有 position:fixed; 的菜单和页脚，因此它们始终位于顶部和底部。

在这种情况下，菜单始终位于顶部，页脚始终位于底部。

这里是 HTML 标记和 CSS

请阅读以下内容，了解我正在努力实现的目标并查看更新。

**** 原帖 ****

html, body {
	padding:0;
	margin:0;
}

nav, footer {
	position:fixed;
	background:#900;
	height:50px;
	width:100%;
}

nav {
	top:0;
}

footer {
	bottom:0;
}

p {
	background: #E6E6E6;
	margin:0 0 10px 0;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed Footer</title>

</head>

<body>

<nav>Top Fixed Menu</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
 
 
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>

<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
 
 
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>

<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
 
 
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>

<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
 
 
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>

<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
 
 
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>

<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p> 

<footer>Bottom Fixed Footer</footer>



</body>
</html>

我想要实现的是，如果视口高度低于 300 像素，则顶部菜单和页脚之间的距离始终为 500 像素。

但如果视口高度超过 500 像素，顶部菜单和页脚将固定在顶部和底部，并且只要视口不断增加，它们之间的间距就会增加。

我怎样才能做到这一点？

如果有人想知道，滚动时的内容流。

**** 更新 ****

当视口低于 500 像素高度时，我不希望页脚被固定在特定高度上。

原来我有这个

nav, footer {
    position:fixed;
    background:#900;
    height:50px;
    width:100%;
}

当视口低于 500 像素高度时，我刚刚添加了此添加媒体。

@media screen and (max-height: 499px) {
footer {
    position:relative;
}
}

我还在 HEAD 元素中添加了它以使 @media 正常工作。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【问题讨论】：

如果视口的高度小于500px，如果内容需要的高度超过这个值怎么办？

标签： javascript html css

【解决方案1】：

如果视口小于 500 像素，则将显示区域限制为高度减去页眉，同时将页脚保持在底部。如果大于 500px，也将页脚保持在底部。
这应该有效：

function addmore() {
  for (var i = 0; i < 60; i++)
    document.getElementById('a').innerHTML = '<p>'+i+': some page content</p>' + document.getElementById('a').innerHTML;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  overflow-y: hidden;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}
nav,
footer {
  flex: 0;
  background: red;
  line-height: 50px;
  color: white;
  width: 100%;
}
main {
  flex: 1;
  position: relative;
  overflow-y: auto;
  max-height: calc(100% - 100px);
}
@media screen and (max-height: 499px) {
  .content {
    max-height: calc(100vh - 50px);
    width: 100%;
    overflow-y: auto;
  }
}

<body>
  <nav>nav bar</nav>
  <main>
    <section class="content">
      <button onclick="addmore()">add more</button>
      <p id="a">some page content</p>
    </section>
  </main>
  <footer>footer</footer>
</body>

【讨论】：

这不起作用，如果视口超过 500px 高度，它不会将页脚保持在底部的固定位置。
我将body 指定为min-height: 500px + [header height + footer height]，而不是使用最小高度的主视口，它现在应该可以工作了。
我给了 min-height: 500px;到 BODY 和到 NAV 和 FOOTER 高度：50px；但还没有工作，你让它工作了吗？
我的答案中的 sn-p 似乎有效，除非我误解了你想要的东西。您示例中的所有段落都将进入我的答案中的.content 部分。
如果您在 sn-p 中添加更多内容并且内容的高度超过 500px 标记，则页脚应保持固定在底部的位置，但您的 sn-p 不会这样做，因为更多内容我添加的页脚不断向下移动并失去固定位置。