`height: auto` не работает для автоматического изменения размера заголовка

0

Я пытаюсь сделать простую вещь в CSS

У меня есть тег header и внутри, что есть несколько h тегов. Итак, чтобы иметь отзывчивый дизайн, я делаю

height:auto;

внутри тега header, поэтому он будет автоматически растягиваться, чтобы содержать теги h. Правильно?

Но не работает, header - это всего лишь строка в верхней части страницы. Он должен растягиваться, чтобы содержать заголовки, не так ли?

Что мне не хватает?

Это хорошая практика, чтобы поместить CSS в теги h а не в header стиля вообще? Итак, h теги будут похожи на header в пользовательском глазу?

Благодарю вас

Проверьте это здесь

ОБНОВЛЕНИЕ Спасибо всем за ансеров. Я думал, что GluePear решит проблему, поэтому я редактирую свой код. Но ничего не случилось. У реального файла, который у меня есть, есть 2 h теги внутри header. И затем body, и некоторое погружение внутри body. По какой-то причине это не работает. Заголовок расширяется на всю страницу!

Проверьте это

Как я могу это исправить?

еще раз спасибо

Теги:
height

3 ответа

1

Если вы добавите overflow:auto в заголовок css, он будет работать.

Вам также нужно закрыть <header>:

http://jsfiddle.net/pvVxx/

Поделиться
  • 0
    Всем привет. Это работает? Потому что цвет фона заголовка должен быть серым, того же цвета, что и h1 . И это не так ... Они оба #CCCCCC но цвет заголовка белый
  • 0
    Обновил мой ответ. В вашем CSS была опечатка: у вас был background - color background-color вместо background-color .
Показать ещё 4 комментария
0

Я поставил ответ, чтобы сократить проблему: используя float 'kills' любой расчет высоты, как-то - это лучшее объяснение, которое я нашел (да вот на стеке) http://css-tricks.com/all-about-floats/

Поделиться
  • 0
    Спасибо за ответ. Я удаляю float но проблема остается. Я обновил свой вопрос
  • 0
    у вас было много «attr - l / t / r» вместо «attr-l / t / r» и «x%» вместо «x%» -> я исправил это и добавил «h2 a» к «h2» теперь это выглядит так: jsfiddle.net/98YWA/4
0

Вам нужно очистить после использования float. Вот обновленный пример: http://jsfiddle.net/Fuw6x/28/ clear: both;

Читайте здесь: http://www.w3schools.com/cssref/pr_class_clear.asp

Поделиться
  • 0
    Спасибо за ответ. Я удаляю float но проблема остается. Я обновил свой вопрос

Ещё вопросы

Сообщество Overcoder
Наверх
Меню