固定フッタの最小高さ - 私はUSmediaを使用しました。

私はポジションのメニューとフッタを持っています。のように、常に上下にとどまっています。固定フッタの最小高さ - 私はUSmediaを使用しました。

この場合、メニューは常に上部にあり、フッターは常に下部にあります。ここで

はHTMLマークアップとCSSで

私は達成するためにしようとしているものを見るために、Updateを確認するには、以下のお読みください。私が達成しようとしています何

**** ORIGINAL POST ****

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ピクセルの下にトップとの距離を行く場合ということですメニューとフッターは常に500ピクセルです。

しかし、ビューポートの高さが500pxを超えると、ビューポートが増加し続ける限り、トップメニューとフッタは上下に固定され、それらの間のスペースは増加します。

これをどのように達成できますか？

誰もが驚くべきことにスクロールするときのコンテンツフロー。

**** は私はフッターをしたくなかったという特定の高さのために@mediaを使用して終了

****を更新しましたビューポートが500ピクセルの高さを下回ったときに固定されます。

は、もともと私はこの

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

を持っていた私は、ビューポートが500pxなどの高さを下回ると、このメディアを追加追加しました。

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

これをHEAD要素の中に追加して、@mediaの作業を行いました。

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

出典

2017-02-03 lupoll88

をビューポートの高さが500pxなどよりも小さい場合、何が起こるのでしょうか？ – Schlaus

ビューポートは下部にフッターを維持しながら、高さマイナスヘッダに表示される領域を制限する、< 500pxなどの場合。 > 500ピクセルの場合は、フッターを下にしてください。
これは動作するはずです：コンテンツは、それ以上の高さを必要とする場合

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>

出典

2017-02-03 16:55:00

これは機能しません。ビューポートが500pxの高さを超えると、フッターを下の固定位置に保持しません。 – lupoll88

メインビューポートを最小の高さにするのではなく、 'body-'に 'min-height：500px + [header height + footer height]'を与えました。 –

私は最小高さを与えました：500px; BODYとNAVとFOOTERの高さ：50px;まだ動作しません、あなたはそれを動作させましたか？ – lupoll88

固定フッタの最小高さ - 私はUSmediaを使用しました。

答えて

関連する問題