Минимальная высота для неподвижного нижнего колонтитула - I USED @media

У меня есть нижний колонтитул с позиция: исправлена;, поэтому они остаются все время сверху и снизу.Минимальная высота для неподвижного нижнего колонтитула - I USED @media

В этом случае меню всегда находится в верхней части и нижнем колонтитуле всегда внизу.

Вот HTML Markup и CSS

ПРОЧТИТЕ НИЖЕ ВИДЕТЬ, ЧТО Я пытаюсь добиться и видеть UPDATE.

**** ОРИГИНАЛЬНЫЙ ПОСТ ****

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>

То, что я пытаюсь добиться, что если видовой экран опускается ниже 300px по высоте расстояние между верхним Меню и нижний колонтитул всегда 500 пикселей.

Но если видовое окно выходит за пределы 500 пикселей в высоту, верхнее меню и нижний колонтитул остаются фиксированными сверху и снизу, а пространство между ними увеличивается до тех пор, пока область просмотра увеличивается.

Как я могу это достичь?

Содержимое потока при прокрутке, если кто-то задается вопросом.

**** ОБНОВЛЕНО ****

Я в конечном итоге с помощью @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, ограничить отображаемую область до высоты минус заголовка, сохраняя при этом колонтитула в нижней части. Если оно> 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>

источник

2017-02-03 16:55:00

Это не работает, он не поддерживает нижний колонтитул в фиксированном положении внизу, если видовое окно выходит за пределы высоты 500 пикселей. – lupoll88

Я дал 'body'' min-height: 500px + [height height + footer height] 'вместо того, чтобы иметь основной видовой экран с минимальной высотой, и теперь он должен работать. –

Я дал min-height: 500px; до BODY и NAV и FOOTER height: 50px; но пока не работает, не заставляете ли вы работать? – lupoll88

Минимальная высота для неподвижного нижнего колонтитула - I USED @media

ответ

Смежные вопросы