固定页脚的最小高度 - I USED @media

问题描述：

我有一个菜单和页脚，其中包含position：fixed;，所以他们一直在顶部和底部。固定页脚的最小高度 - I USED @media

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

下面是HTML标记和CSS

请仔细阅读下面，看看有什么我想实现并查看更新。

**** 原帖 ****

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

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

 
nav { 
 
\t top:0; 
 
} 
 

 
footer { 
 
\t bottom:0; 
 
} 
 

 
p { 
 
\t background: #E6E6E6; 
 
\t 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像素高度的顶部之间的距离菜单和页脚总是500px。

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

我该如何做到这一点？

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

**** 修订 ****

我最终使用@media针对特定的高度我不想页脚当视口低于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">

如果视口的高度小于500像素，如果内容需要比这更高度应该发生什么？ – Schlaus

答

如果视口< 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高度，它不会将页脚保留在底部的固定位置。 – lupoll88

我已经给出'body'' min-height：500px + [header height + footer height]'而不是主视口与最小高度，现在它应该可以工作。 –

我给出了最小高度：500px;到BODY和NAV和FOOTER身高：50px;但还没有工作，你做了它的工作？ – lupoll88

固定页脚的最小高度 - I USED @media

相关推荐