Только CSS - динамическая высота заголовка и высота содержимого 100% с полосами прокрутки - PullRequest
Новая
       24

Только CSS - динамическая высота заголовка и высота содержимого 100% с полосами прокрутки

3 голосов
/ 30 апреля 2011

Цель состоит в том, чтобы полоса прокрутки не скрывалась с динамическим заголовком высоты.

В стеке есть много сообщений о высоте CSS 100%; Моя проблема уникальна, поэтому извините, если это обман, но я не смог найти ответ.

Так что моему веб-приложению нужны вертикальные полосы прокрутки + высота 100% и динамическая высота заголовка. Высота заголовка неизвестна, поэтому высота области содержимого должна составлять 100% высоты заголовка.

Проблема, которую я не мог понять, как решить ее элегантно, заключалась в том, что вертикальные полосы прокрутки контента (особенно нижняя кнопка прокрутки вниз) могли бы быть скрыты, если вы сделаете высоту: 100% на ней, с заголовком вверх Топ. (высота> 100% не идеальна). 

<style>
  html{
    height:100%;
  }
  body{
    height:100%;
    margin:0px;
    padding:0px;
    overflow:hidden;
  }
  #header{
    background:blue;
  }
  #content{
    background:red;
    overflow-y:scroll;
    height:100%;
  }
</style>

<body>
  <div id='header'>
    dynamic height top. (Text here could be any length.)
  </div>
  <div id='content'>
    100% with no-hidden scroll-down scrollbar button.
  </div>
</body>

Может ли это быть сделано без JavaScript и таблиц HTML / CSS? (У меня были проблемы с использованием colspan при использовании таблиц css, и кажется плохой практикой использовать таблицы html для разметки)

Интересно, есть ли у гуру CSS / HTML ответ?

http://jsbin.com/ijoqe4/ <- см. Скрытую нижнюю кнопку прокрутки здесь </p>

http://jsbin.com/ijoqe4/edit <- редактировать в jsbin </p>

Спасибо за понимание. :)

Ответы [ 2 ]

2 голосов
/ 01 мая 2011

Насколько я знаю, с динамическим заголовком нет способа сделать это в чистом CSS. Ваша проблема возникает из-за того, что вы:

  • Хотите, чтобы заголовок был динамическим, поэтому контейнер должен быть динамическим соответственно
  • Для динамического изменения положения контейнера в соответствии с заголовком необходим заголовок уровня block с контейнером уровня block под ним.
  • Единственный способ растянуть контейнер до нижней части окна - установить position: absolute; top:0; bottom: 0;, при этом bottom относится к нижней части окна. Но вам нужно top, чтобы ссылаться на нижнюю часть головы, а не на верхнюю часть окна (то есть элемент, на который ссылается bottom).

Таким образом, поскольку в чистом CSS невозможно изменить элемент в позиции относительно двух других элементов, вам придется либо использовать решение javascript, либо использовать таблицы. Грустно, но правда.

Но, хотя таблицы для дизайна обычно воспринимаются как табу, в этом случае это будет ваш лучший и самый чистый вариант, и это все еще - технически - только HTML и CSS.

0 голосов
/ 01 мая 2011

возможно попробуйте установить html, рост до 98%, а не 100%.Вы отключили переполнение тела, поэтому использование div на 100% выходит за рамки размера браузера.

...