Макет с заголовком, нижним колонтитулом и разделом содержимого в IE11
В настоящее время я разрабатываю одностраничное приложение, состоящее из верхнего, нижнего колонтитула и раздела содержимого. Раздел содержимого всегда должен заполнять доступное пространство между верхним и нижним колонтитулами, и в случае, если порт просмотра слишком мал, пользователь должен иметь возможность прокручивать всю страницу. Это означает, что нижний колонтитул таким образом не липнет.
Размещение всех трех частей внутри гибкого бокса и установка flex: auto 1 1 для содержимого не имеет никакого эффекта, поскольку IE11 имеет проблемы с гибкими элементами, контейнер которых имеет минимальную высоту 100%.
Знаете ли вы какой-либо метод, позволяющий сделать такой макет возможным?
Обновлять:
Чтобы проиллюстрировать проблему, я привожу отрывок.
Обновление 2:
Поскольку я хочу, чтобы элемент представления (класс .view) постепенно переходил в предыдущий, в зависимости от текущего маршрута, я должен использовать position: relative для элемента содержимого. К сожалению, flex-shrink: 0 больше не действует.
html, body {
margin: 0;
height: 100%;
min-height: 100vh;
background: #000000;
color: #EFEFEF;
font-family: Segoe UI, Roboto, Helvetica;
}
#app {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
.header-section {
flex-shrink: 0;
}
.footer-secton {
flex-shrink: 0;
}
.content {
position: relative;
flex: auto 1 1;
background: rgba(64, 124, 214, 0.5);
}
.view {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}<div id = "app" class = "container">
<header class = "header-section">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</header>
<main class = "content">
<div class = "view">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</div>
</main>
<footer class = "footer-section">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</footer>
</div>Я предоставил фрагмент, чтобы проиллюстрировать проблему.
Используйте jQuery, чтобы установить содержимое и минимальную высоту заголовка, чтобы закрыть браузер. Затем он автоматически перейдет на оставшееся место.
Ответы 5
Вместо использования min-height: 100% я бы использовал height: 100% и overflow: visible для этого элемента оболочки. Это позволяет избежать проблемы минимальной высоты и при необходимости будет расширяться (и прокручиваться) из-за содержимого.
К сожалению, это не работает. Если я уменьшу высоту окна браузера, нижний колонтитул будет размещен над содержимым в нижней части окна просмотра.
попробуйте добавить overflow: visible и / или flex-shrink: 0 в элемент содержимого
flex-shrink: 0 выглядит многообещающе.
Если я хочу расширить свой пример, чтобы обеспечить хорошие эффекты затухания, мне нужно установить position: relative; для .content. Вставка в этот элемент дочернего элемента с абсолютным позиционированием разрушает положительный эффект flex-shrink: 0;. Вы знаете, как это решить?
Я обновил свой фрагмент и добавил дальнейшее описание к своему первоначальному сообщению. Если вы хотите получить более подробную информацию, дайте мне знать.
обратите внимание на второй ответ, включая добавленный мной фрагмент.
IE11 имеет плохая поддержка для flexbox. Вы можете использовать это старое решение как запасной вариант ...
Липкий нижний колонтитул
* {padding: 0; margin: 0;}
html, body {height: 100%; background: blue;}
#header, #footer {position: fixed; width: 100%; left: 0;}
#header {top: 0; background: red;}
#footer {bottom: 0; background: green;}
#content {padding: 100px 0;}<div id = "header">header</div>
<div id = "content">content</div>
<div id = "footer">footer</div>Нелипкий нижний колонтитул
* {padding: 0; margin: 0;}
html, body {height: 100%; background: blue;}
#header, #footer {width: 100%; left: 0; z-index: 2;}
#header {position: fixed; top: 0; background: red;}
#footer {position: absolute; bottom: 0; background: green;}
#page {min-height: 100%; position: relative;}
#content {padding: 100px 0;}<div id = "header">header</div>
<div id = "page">
<div id = "content">content</div>
<div id = "footer">footer</div>
</div>Это тоже полезно. Спасибо. Но я по-прежнему предпочитаю использовать макеты на основе flexbox.
Добро пожаловать. Flexbox современный, но несовместимость браузеров не является преимуществом. ;-)
Установите минимальную высоту с помощью jQuery на основе области просмотра браузера. Это позволит вам разместить контент внутри области просмотра. Это будет поддерживаться во всех браузерах независимо от содержимого.
min-height используется для определения занимаемых пространством содержимого. Если содержание больше, чем мы ожидаем, автоматически появится полоса прокрутки. В противном случае контент будет занимать область просмотра.
$(document).ready(function(){
$(window).resize(function() {
setContentHeight();
});
function setContentHeight(){
var contentHeight = window.innerHeight - $('.footer-section').height()-19;
$('.page-wrapper').css('min-height', contentHeight+'px');
}
setContentHeight();
});.container{
background-color:yellow;
}
.page-wrapper{
background-color:blue;
color:white;
}
.header-section{
background-color:green;
color:white;
}
.footer-section{
background-color:black;
color:white;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "app" class = "container">
<div class = "page-wrapper">
<header class = "header-section">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</header>
<main class = "content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</main>
</div>
<footer class = "footer-section">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</footer>
</div>Это тоже был бы вариант, но я предпочитаю решение на основе css только для повышения производительности пользовательского интерфейса. Учитывая тот факт, что это приложение vue.js, я бы рассмотрел DOM-API, заключенный внутри директивы vue.js.
Это тоже не даст плохого подхода. Это то, чего достигают большинство шаблонов css. Напишите свою собственную директиву, поместите этот код и примените его там, где вам это нужно. Это решит вашу проблему и не снизит производительность. Пользовательская директива: vuejs.org/v2/guide/custom-directive.html. Следующая статья: codeproject.com/Articles/1199114/…
Нет необходимости исправлять эту проблему вручную, так как вы можете использовать последнюю версию начальной загрузки, и она решит ее в IE 11.
Вы можете увидеть здесь https://www.bootply.com/QIdjUoiMOq
Поскольку из-за некоторых ограничений я должен избегать зависимостей от других макетов-фреймворков. Так что бутстрап не подходит для моего особого случая использования.
Это ответ на измененный код ответа с использованием абсолютно позиционированного элемента.
В этом случае достаточно добавить overflow: auto к абсолютно позиционированному элементу .view, чтобы он мог прокручиваться внутри своего родителя, как показано в этом фрагменте (я добавил еще немного содержимого, чтобы сделать полосу прокрутки видимой):
html, body {
margin: 0;
height: 100%;
min-height: 100vh;
background: #000000;
color: #EFEFEF;
font-family: Segoe UI, Roboto, Helvetica;
}
#app {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
.header-section {
flex-shrink: 0;
}
.footer-secton {
flex-shrink: 0;
}
.content {
position: relative;
flex: auto 1 1;
background: rgba(64, 124, 214, 0.5);
}
.view {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}<div id = "app" class = "container">
<header class = "header-section">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</header>
<main class = "content">
<div class = "view">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</div>
</main>
<footer class = "footer-section">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</footer>
</div>Спасибо. Затем для этой цели мне нужна настраиваемая полоса прокрутки, но по иронии судьбы IE11 не может прокручивать содержимое внутри .view. Иногда этот браузер является проблемой.
Не могли бы вы вставить общий код?