Comments 30
UFO just landed and posted this here
UFO just landed and posted this here
Про height:100% html и body — jsfiddle.net/PGtPK/1/ (вместо height надо min-height для html и body указывать)
Про то, что height:100% применяется только для тех элементов, высота родителей которых известна (задана, пусть и в процентах) автор намеренно упустил? ( jsfiddle.net/PmJCD/ смотреть в ie (я в 9 тестировал), если что, режим совместимости надо выключить )
> overflow: hidden (или любой другой но не auto)
Любой другой кроме visible, а не auto — www.w3.org/TR/CSS21/visuren.html#block-formatting
Вы когда переводили, сами проверяли что переводите?
Про то, что height:100% применяется только для тех элементов, высота родителей которых известна (задана, пусть и в процентах) автор намеренно упустил? ( jsfiddle.net/PmJCD/ смотреть в ie (я в 9 тестировал), если что, режим совместимости надо выключить )
> overflow: hidden (или любой другой но не auto)
Любой другой кроме visible, а не auto — www.w3.org/TR/CSS21/visuren.html#block-formatting
Вы когда переводили, сами проверяли что переводите?
Редко пишу, дык карма не позволяет частить, но читай такой бред, понимаешь — учиться и читать сейчас ни кто не хочет.
Ситуация с height:100% верная, но тут есть над чем подумать. Но об этом не хочу сейчас.
С width:100% тут все гораздо проще, чем может быть. Есть такое замечательное свойство display:block, оно по умолчанию делает блок со свойством box-sizing: border-box. И при этом некоторые стандартные теги, например DIV уже имеют его. Пример: если размещаете один див в другой, то второй будет иметь ширину + отступ наружний + бордер + отсуп внутренний по умолчанию.
Стоило написать, что проблема касается, например сделать поле для ввода шириной 100%. В этом случае да, уже без box-sizing: border-box не обойтись, это проблема касается только полей форм. Для остальных есть решение display:block
C z-index все еще проще. Комментарий не совсем верные. Еще очень важен порядок элементов, в браузерах следующий элемент расположен выше, чем предыдущий. В одном из проектов столкнулись с актой проблемой. Важный блок поставили в начале HTML, задали absolute, z-index. А он оказывался ниже блока по Z, который был в самом конце HTML с тем жe z-index… Правильно будет так написать
Перед применением z-inedx убедитесь, что установили свойство position не равным static
Не используйте значения большем чем 5 цифр для z-index, это абсолютно бессмысленно; в большинстве случаев, значение z-index в районе 10, будет более чем достаточно.
Убедитесь, что элемент который вы хотите перекрыть находится в том же контексте наложения или дальше по коду.
Если у вас все еще что-то работает не так, как должно, убедитесь в отсутствии трансформаций, opacity и position не равный static выше у родительских элементов.
Проблемы будут у автора, по любому
Ситуация с height:100% верная, но тут есть над чем подумать. Но об этом не хочу сейчас.
С width:100% тут все гораздо проще, чем может быть. Есть такое замечательное свойство display:block, оно по умолчанию делает блок со свойством box-sizing: border-box. И при этом некоторые стандартные теги, например DIV уже имеют его. Пример: если размещаете один див в другой, то второй будет иметь ширину + отступ наружний + бордер + отсуп внутренний по умолчанию.
Стоило написать, что проблема касается, например сделать поле для ввода шириной 100%. В этом случае да, уже без box-sizing: border-box не обойтись, это проблема касается только полей форм. Для остальных есть решение display:block
C z-index все еще проще. Комментарий не совсем верные. Еще очень важен порядок элементов, в браузерах следующий элемент расположен выше, чем предыдущий. В одном из проектов столкнулись с актой проблемой. Важный блок поставили в начале HTML, задали absolute, z-index. А он оказывался ниже блока по Z, который был в самом конце HTML с тем жe z-index… Правильно будет так написать
Перед применением z-inedx убедитесь, что установили свойство position не равным static
Не используйте значения большем чем 5 цифр для z-index, это абсолютно бессмысленно; в большинстве случаев, значение z-index в районе 10, будет более чем достаточно.
Убедитесь, что элемент который вы хотите перекрыть находится в том же контексте наложения или дальше по коду.
Если у вас все еще что-то работает не так, как должно, убедитесь в отсутствии трансформаций, opacity и position не равный static выше у родительских элементов.
Проблемы будут у автора, по любому
> С width:100% тут все гораздо проще, чем может быть. Есть такое замечательное свойство display:block, оно по
display: block не делает элемент box-sizing: border-box. И этот случай в статье описан. Так работает только если не задавать свойство width: 100%;
jsfiddle.net/UP6Cm/
> C z-index все еще проще. Комментарий не совсем верные
Добавлю уточнение в статью, хотя там и рассматривается немного другой случай. Когда есть два блока с z-index или position не static и нужно, что бы дочерний элемент одного перекрывал дочерний элемент другого блока. Или когда свойства типа opacity и transform создают свой контекст там где это не задумывалось.
display: block не делает элемент box-sizing: border-box. И этот случай в статье описан. Так работает только если не задавать свойство width: 100%;
jsfiddle.net/UP6Cm/
> C z-index все еще проще. Комментарий не совсем верные
Добавлю уточнение в статью, хотя там и рассматривается немного другой случай. Когда есть два блока с z-index или position не static и нужно, что бы дочерний элемент одного перекрывал дочерний элемент другого блока. Или когда свойства типа opacity и transform создают свой контекст там где это не задумывалось.
Про opacity не знал, спасибо.
Думаю, новичкам можно много из статьи почерпнуть. В своё время многое из вышеописанного приходилось узнавать методом научного тыка.
Думаю, новичкам можно много из статьи почерпнуть. В своё время многое из вышеописанного приходилось узнавать методом научного тыка.
UFO just landed and posted this here
интересно, если body по умолчанию имеет height:auto, то почему
body style=«background:red;»
зальёт всю страницу?
body style=«background:red;»
зальёт всю страницу?
Эх, опять одни и те же баяны…
Первая часть поста могла бы быть гораздо короче:
— блок на всю высоту страницы:
html{
height:100%;
}
body{
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
#div{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Первая часть поста могла бы быть гораздо короче:
— блок на всю высоту страницы:
html{
height:100%;
}
body{
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
#div{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
UFO just landed and posted this here
Позиционирование можно отключить, но вот порядок следования свойств для — критичен, ибо
Поразительное дело — приспичило мне тут растянуть абсолютно позиционированный блок на всю ширину страницы… И так, и сяк — растягивается только на высоту вьюпорта. Полчаса шерстил инет, максимум что советуют, это position:relative; для body. Но не работает же.
И тут натыкаюсь на эту статью, вскользь пробегаю комментарии глазами. Нахожу свой же рецепт (а ведь я его когда-то даже отдельно выписывал — поскольку уж очень часто потребность была в подобном трюке). Копипастю — всё работает))
Зато кто-то, обиженный жизнью, успел минус влепить. Спасибо тебе мил человек — благодаря этому я особо внимание и зафкисировал!
И тут натыкаюсь на эту статью, вскользь пробегаю комментарии глазами. Нахожу свой же рецепт (а ведь я его когда-то даже отдельно выписывал — поскольку уж очень часто потребность была в подобном трюке). Копипастю — всё работает))
Зато кто-то, обиженный жизнью, успел минус влепить. Спасибо тебе мил человек — благодаря этому я особо внимание и зафкисировал!
Позиционирование можно отключить, но вот порядок следования свойств для — критичен, ибо
что бы → чтобы.
Благодарю, вы только что решили мне проблему.
Огромное спасибо за статью. Я очень давно задумывался почему height работает не корректно(в %). Думал, ломал голову, причем все состовляющие были в голове, но вот попросту объединить их в вывод не хватало смекалки. И как обычно это было типа — как же я сам то не допер.
Sign up to leave a comment.
Проблемы CSS. Часть 2