Расположение верхнего / нижнего колонтитула / содержимого с прокручиваемым контентом и нижним колонтитулом, закрепленным в нижней части области просмотра

Question

В этом вопросе есть много квазидубликатов, я знаю: шаблон веб-страницы, где контент занимает полную высоту области просмотра, если имеет 1 строку минус нижний колонтитул - одна, но это не то, что я хочу; есть такой смешной вопрос: Как создать HTML-страницу CSS с заголовком, нижним колонтитулом и содержимым , которая, в основном, описывает то, что я хочу, я думаю, но, к сожалению, это несколько непоследовательно и на самом деле ответа нет. Я нашел много помощи, делая вещи, которые я, вероятно, мог бы понять для себя, и которые я не хочу:

• Исправлен верхний колонтитул, нижний колонтитул зафиксирован снизу для короткого контента, но отталкивается от страницы, когда контент длиннее (как это часто повторяется здесь: http://boagworld.com/technology/fixed-footers-without-javascript)
• Исправлен верхний колонтитул, содержимое и нижний колонтитул, когда нижний колонтитул не прикреплен к нижней части окна просмотра
• Исправлены верхний и нижний колонтитулы, где содержимое прокручивается «позади» верхнего и нижнего колонтитула - это мило, и я использовал его, но сейчас это не то, что я хочу

Я знаю, как я получу то, что хочу, если бы я использовал модель коробки «сломанный» или «рамочный бокс»:

1. Поместите контейнер со 100% высотой туда, где я хотел, чтобы он располагался горизонтально на странице, с "position: относительным", чтобы немного облегчить работу с содержимым
2. В контейнере поместите три абсолютно позиционированных элемента div: заголовок, который застревает наверху (с фиксированной высотой); нижний колонтитул, прилипший к нижней части (также фиксированная высота); и содержимое высотой 100% , но с отступом сверху и снизу для учета верхнего и нижнего колонтитула.

В «разбитой» блочной модели придание блоку контента 100% высоты работало замечательно, потому что высота включала верхнюю и нижнюю отступы. Это даже отлично работало в режиме причуд IE6, а для Firefox я бы просто использовал "-moz-box-sizing: border-box;" чтобы заставить его работать так же.

Но вот мы, живущие в будущем, с лунными колониями и замороженной пиццей на завтрак, поэтому я стараюсь не вспоминать много о днях "бордюров". Сложнее всего мне "освоить" эту технику верстки, как сделать прокрутку контента. Единственный подход, который я могу придумать, - это хакерская вариация вышеприведенного:

1. Опять же, начните с контейнера высотой 100%, «позиция: относительная»
2. Опять же, абсолютно позиционированный верхний и нижний колонтитулы с фиксированной высотой.
3. Для содержимого я бы просто добавил div без определенной высоты, но с "top" и "bottom", установленными в соответствии с высотой верхнего и нижнего колонтитулов.

Эта техника не будет действительно работать в IE6; ну, на самом деле это не будет работать вообще, потому что IE6 не получает высоту из-за значения «top» и «bottom». Я мог бы использовать этот «активный» материал в CSS, который поддерживает IE, для эффективного вычисления высоты с помощью Javascript, но я считаю, что это довольно отвратительно.

Я прошел через множество описаний очень похожих проблем с макетом в сети, но главное, что мне еще предстоит найти, - это хорошая техника для прокрутки этого среднего блока контента. У меня есть ощущение, что можно было бы использовать поле содержимого с верхним и нижним полями, установленными для учета верхнего и нижнего колонтитула, но я не знаю, как ограничить его высоту, чтобы полоса прокрутки включалась в правая точка (когда фактическое содержимое переполняет пространство между нижней частью верхнего колонтитула и верхней частью нижнего колонтитула).

Идеи? Ссылки на сокровища шаблонов? (Кстати, область Мэттью Джеймса Тейлора, похоже, в настоящий момент утрачена, что создает сильные беспорядки в Силе.) У меня почти нет идей.

обновление Вот пример того, что я хочу: http://gutfullofbeer.net/dreamlayout.html

Эта примерная страница должна работать в Firefox и Chrome, и я думаю, что Safari работает наполовину в IE8 (только наполовину, потому что, конечно, мы не могли ожидать, что Microsoft получит "-ms-border-box" для правильной работы ).

Также я добавляю тег "javascript" на случай, если какой-нибудь гений может дать мне взлом IE, который не слишком отвратителен.

еще одно обновление Вот «компромиссная» компоновка, в которой центральное содержимое прокручивается «под» верхним и нижним колонтитулами, а полоса прокрутки предоставляется внешним контейнером. На самом деле это выглядит довольно мило, в зависимости от ваших вкусов, и работает в IE6, и я думаю, что везде (хотя я не пробовал Opera). Проигнорируйте цвета конечно; они просто там как диагностические средства.

http://gutfullofbeer.net/compromiselayout.html

Answer 1

Может быть, это поможет вам: (вам нужен jQuery)

$(function () {
	$("#toggle-content").click(function() {
        $(".more-content").toggleClass("less-content");
	});
});

body {
  height: 100%;
  margin: 0 auto;
  width: 50%;
}

.fixed-top {
  width: 100%;
  height: 20vh;
  background: #faa;
}

.wrapper {
  positon: static;
  height: 100%;
  width: 100%;
}

.content {
  position: relative;
  width: 100%;
  height: 20vh;
  background: #ffa;
}

.fixed-bot {
  position: fixed;
  width: 50%;
  height: 20vh;
  background: #faa;
  opacity: .5;
  bottom: 0;
}

.more-content {
  /* display: block; */
  overflow-y: scroll;
  transition: all 0.3s ease;
  height: 40vh;
  
}

.less-content {
  height: 0;
}

/*
other styles
*/

h1,h2 {
  margin-bottom: 0;
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="fixed-top"><h1>THIS IS HEADER CONTENT</h1>
   <button id="toggle-content" type="button">MORE/LESS</button>
</header>
<section class="wrapper">
  <section class="content"><h2>CONTENT</h2>, Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui.
  </section>
  <section class="more-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p>
</section>
<footer class="fixed-bot">
</footer>
</section>