<html>
<head>
<style type="text/css">
body {
margin: 0;
border: 0;
padding: 0;
height: 100%;
max-height: 100%;
background-color: red;
overflow: hidden;
}
* html body {
padding: 10px 0 0 0;
}
#content {
position: fixed; /*исправил ашипку*/
/*width: 100%;
width: expression(document.body.clientWidth + "px");
height: expression((document.body.clientHeight - 10) + "px");*/
top: 10px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background-color: white;
}
* html #content {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="content">
content
</div>
</body>
</html>
div, размером со 100 пикселей сверху до низу. проблемы в IE
<div style="position:absolute; top:100px; bottom:0px; width:100%">...</div>
должен быть по ширине на всю страницу, а высота - со 100 пикселей сверху, до низу.
Это везде работает, кроме IE!
Как лечится, кто знает?
Спасибо
должен быть по ширине на всю страницу, а высота - со 100 пикселей сверху, до низу.
Это везде работает, кроме IE!
Как лечится, кто знает?
Спасибо
Не очень понятно что значит "сверху до низу"... 100%-ая высота вас интересует с отступом 100 пикселей сверху?
Интересует, чтобы сверху div начинался на расстоянии 100 px, а заканчивался всегда внизу
т.е. как бы height=100%-100px
т.е. как бы height=100%-100px
Надо,задать блоку маргин топ 100 и сделать высоту 100%, если правильно понял Ваше намерение. вообще это не может работать везде - видимо Вам просто повезло с заполнителем. но это не очень хорошо.
Лучше поставить позишн релатив и значением топ сместить вниз относительно верхнего края предка.
"научиться говорить надо сначала по-русски (с)"
Лучше поставить позишн релатив и значением топ сместить вниз относительно верхнего края предка.
"научиться говорить надо сначала по-русски (с)"
100%-ная высота очень капризная штука и работает не всегда и не везде. Советую вам спросить на форуме или в жж в комьюнити где собираются профессиональные верстальщики. Тут просто большинство программисты ;-)
Цитата: rnbparty
Надо,задать блоку маргин топ 100 и сделать высоту 100%,
Это вынужденная мера которая не дает точно требуемого результата. Реализовать данную задачу в IE можено только средствами JS.
Кстати, может вам стОит описать проблему комплексно? Может быть вы просто хотите придавить футер к нижнему краю или колонки сделать одной высоты? Для этого есть готовые решения. Т.е. я о том, что конечного результата порой можно добиться, не решая проблему в лоб.
Цитата:
width: expression(document.body.clientWidth + "px");
height: expression((document.body.clientHeight - 10) + "px");*/
height: expression((document.body.clientHeight - 10) + "px");*/
Без экспрешенов?
Цитата: Artlight
Интересует, чтобы сверху div начинался на расстоянии 100 px, а заканчивался всегда внизу
т.е. как бы height=100%-100px
т.е. как бы height=100%-100px
Вообще-то CSS такой гибкости не обеспечивает. Не помню точно как, но то, что тебе нужно вполне можно реализовать с помощью отрицательных полей, покопай в эту сторону!
Цитата: rnbparty
Надо,задать блоку маргин топ 100 и сделать высоту 100%
Даже в самом лучшем случае мы получим height: 100% + 100px верхнего поля. В блочной модели CSS поля и отступы входят в размеры блока, именно поэтому "width или height: 100% - 100px"; реализовать стандартными средствами, без всяких уловок, ну никак не получится:eek:
Цитата: e1vin
Не помню точно как, но то, что тебе нужно вполне можно реализовать с помощью отрицательных полей, покопай в эту сторону!
:D а человек то прав! )) Полями да отступами можно вытянуть.
Если можно было бы сделать внешний блок, то подошел бы такой совершенно кроссбраузерный вариантег:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>BlaBlaBla</title>
<style type="text/css">
html,body
{height:100%;
margin:0px;
padding:0px;}
div#out
{width:100%;
height:100%;
background-color:red;}
div#in
{width:100%;
height:auto;
border-top:100px solid white;}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>
</html>
[/HTML]
К чему я.. Ах, да!
Несколько месяцев назад прочитал статейку на ALA про активное использование бордюров в качестве цветовых подложек, так понравилось - многие решения были найдены именно этим способом. Может у кого и будет настроение поковырять бордюры - может удастся реализовать задачу и без вложения нескольких блоков друг в друга?
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>BlaBlaBla</title>
<style type="text/css">
html,body
{height:100%;
margin:0px;
padding:0px;}
div#out
{width:100%;
height:100%;
background-color:red;}
div#in
{width:100%;
height:auto;
border-top:100px solid white;}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>
</html>
[/HTML]
К чему я.. Ах, да!
Несколько месяцев назад прочитал статейку на ALA про активное использование бордюров в качестве цветовых подложек, так понравилось - многие решения были найдены именно этим способом. Может у кого и будет настроение поковырять бордюры - может удастся реализовать задачу и без вложения нескольких блоков друг в друга?
Например такое решение:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>BlaBlaBla</title>
<style type="text/css">
html,body
{height:100%;
margin:0px;
padding:0px;
background-color:red;}
div
{width:100%;
height:auto;
background-color:red;
border-top:100px solid white;}
</style>
</head>
<body>
<div></div>
</body>
</html>
[/HTML]
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>BlaBlaBla</title>
<style type="text/css">
html,body
{height:100%;
margin:0px;
padding:0px;
background-color:red;}
div
{width:100%;
height:auto;
background-color:red;
border-top:100px solid white;}
</style>
</head>
<body>
<div></div>
</body>
</html>
[/HTML]
Цитата: Комаджу
Без экспрешенов?
Ну, Комаджу, ты рассмешил меня, честное слово. :D
Берем статью "CSS для чайников" и читаем об комментариях в ЦСС. тогда внимательно смотрим на этот блок
Код:
#content {
position: absolute;
/*width: 100%;
width: expression(document.body.clientWidth + "px");
height: expression((document.body.clientHeight - 10) + "px");*/
top: 10px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background-color: white;
}
position: absolute;
/*width: 100%;
width: expression(document.body.clientWidth + "px");
height: expression((document.body.clientHeight - 10) + "px");*/
top: 10px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background-color: white;
}
...ладно шучу, с кем не бывает. спишем все на глобальное потепление, то бишь жару :D
Эти строки достались по наследству от предыдущего моего решения. Если сильно мозолят глаза, то просто удалите их. :)
Все работает во всех наиболее распространенных браузерах. ИМХО это лучший вариант и без экспрешинов.
Теперь добавь в свои последние варианты кода много контента в див для вертикальной прокрутки - получается очень нехорошо :) в моем коде же все нормально.
И еще там у меня ошибка в коде position: absolute; надо заменить на position: fixed; только сейчас заметил. прошу прощения
[QUOTE=e1vin]Не помню точно как, но то, что тебе нужно вполне можно реализовать с помощью отрицательных полей, покопай в эту сторону![/QUOTE]
Хотелось бы увидеть примерчег )))
Примерчег чего? Поставь поконкретнее задачу (т.е., что и как должно быть расположено, height: 100% какому блоку задать и т.п.), постараюсь пораскинуть мозгами в свободное время, уверен, что можно это реализовать.
А мое решение не подходит?
Господа, Вас, что то путает совсем :D
[size=1]Я на некоторое время пропадал с форума, а тема была и вернулся, а тема жива.[/size]
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head> <title>BlaBlaBla</title>
<style type="text/css">
html,body {height:100%;width:100%; margin:0px; padding:0px;}
div#heigh_100 {width:100%; height:100%; background-color:red;position:relative;}
div#top_100_px{position:absolute;top:0;left:0;width:100%;height:100px;background-color:blue;color:white;}
div#content{padding-top:100px;color:white;}
</style>
</head>
<body>
<div id="heigh_100">
<div id="content">
100%
</div>
<div id="top_100_px">100px</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head> <title>BlaBlaBla</title>
<style type="text/css">
html,body {height:100%;width:100%; margin:0px; padding:0px;}
div#heigh_100 {width:100%; height:100%; background-color:red;position:relative;}
div#top_100_px{position:absolute;top:0;left:0;width:100%;height:100px;background-color:blue;color:white;}
div#content{padding-top:100px;color:white;}
</style>
</head>
<body>
<div id="heigh_100">
<div id="content">
100%
</div>
<div id="top_100_px">100px</div>
</div>
</body>
</html>
[size=1]Я на некоторое время пропадал с форума, а тема была и вернулся, а тема жива.[/size]
С вложенными дивами я уже показал решение, более компактное, между прочим. Я так понял, задача была с одним дивом решить проблему.
Цитата: skywalker
Господа, Вас, что то путает совсем :D
[size=1]Я на некоторое время пропадал с форума, а тема была и вернулся, а тема жива.[/size]
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head> <title>BlaBlaBla</title>
<style type="text/css">
html,body {height:100%;width:100%; margin:0px; padding:0px;}
div#heigh_100 {width:100%; height:100%; background-color:red;position:relative;}
div#top_100_px{position:absolute;top:0;left:0;width:100%;height:100px;background-color:blue;color:white;}
div#content{padding-top:100px;color:white;}
</style>
</head>
<body>
<div id="heigh_100">
<div id="content">
100%
</div>
<div id="top_100_px">100px</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head> <title>BlaBlaBla</title>
<style type="text/css">
html,body {height:100%;width:100%; margin:0px; padding:0px;}
div#heigh_100 {width:100%; height:100%; background-color:red;position:relative;}
div#top_100_px{position:absolute;top:0;left:0;width:100%;height:100px;background-color:blue;color:white;}
div#content{padding-top:100px;color:white;}
</style>
</head>
<body>
<div id="heigh_100">
<div id="content">
100%
</div>
<div id="top_100_px">100px</div>
</div>
</body>
</html>
[size=1]Я на некоторое время пропадал с форума, а тема была и вернулся, а тема жива.[/size]
Хе, ну достаточно элегантно, согласен, +1 :)
Никаких мучений.
Хм.., ребята, или это я неправильно понял ТЗ... :)
Я так понял, что в слое, который растягивается на всю высоту должен быть контент (ибо зачем еще так извращаться :)) и когда его много у слоя должна появляться вертикальная прокрутка как у меня в посте #9, а не у боди, как у вас.
Лично я бы вообще так не извращался и аффтаром поста не являюсь, просто интересуюсь :)
Короче, кто сделает такое ТЗ отличным от способа в посте #9 без применение экспрешинов и еще и желательно (но не обязательно) не в квиркс моде, того признаю гуру блочной верстки :)
Я так понял, что в слое, который растягивается на всю высоту должен быть контент (ибо зачем еще так извращаться :)) и когда его много у слоя должна появляться вертикальная прокрутка как у меня в посте #9, а не у боди, как у вас.
Лично я бы вообще так не извращался и аффтаром поста не являюсь, просто интересуюсь :)
Короче, кто сделает такое ТЗ отличным от способа в посте #9 без применение экспрешинов и еще и желательно (но не обязательно) не в квиркс моде, того признаю гуру блочной верстки :)
Цитата: Tokolist
Короче, кто сделает такое ТЗ отличным от способа в посте #9 без применение экспрешинов и еще и желательно (но не обязательно) не в квиркс моде, того признаю гуру блочной верстки :)
Блин... совсем народ обленился... чем тебя решение в посте #15 от Комаджу? Ни каких хаков, глупым ослом понимается...
И, кстати, при чем там слои? Стартопик ни чего о слоях не говорил, да и не нужны они тут, когда решение и так имеется.
Цитата: alekciy
Блин... совсем народ обленился... чем тебя решение в посте #15 от Комаджу? Ни каких хаков, глупым ослом понимается...
Я ж говорю вставь в див контент для вертикальной прокрутки... (см. скриншот Осла как должно быть)
И при чем тут обленился????... наоборот хочется сделать как лучше.. :)
я ж блин трачу свое время и силы, а ты говоришь обленился :)
кроме того я привел решения моего ТЗ в посте #9
Цитата: alekciy
И, кстати, при чем там слои? Стартопик ни чего о слоях не говорил, да и не нужны они тут, когда решение и так имеется.
как это причем? :) div - это слой ;) хотя может в данном случае надо было употребить термин DIV дабы не вносить путаницу...
Цитата: Tokolist
Я ж говорю вставь в див контент для вертикальной прокрутки... (см. скриншот Осла как должно быть)
Вставлял. Все получается как нужно. Тебе смещает прокрутка у всей страницы? Меня вот нет ибо так по хорошему и должно быть.
Цитата: Tokolist
кроме того я привел решения моего ТЗ в посте #9
Ну тогда уже можно было считать тему исчерпаной.
Цитата: Tokolist
как это причем? :) div - это слой ;) хотя может в данном случае надо было употребить термин DIV дабы не вносить путаницу...
Э нет... не путай ни себя, ни других ;) . div это div, слой это слой (см. z-index селектор). И смещивать этих два абсолютно разных понятия не только недопустимо, но и вредно.
[QUOTE=alekciy]Вставлял. Все получается как нужно. Тебе смещает прокрутка у всей страницы? Меня вот нет ибо так по хорошему и должно быть.[/QUOTE]
[QUOTE=alekciy]Ну тогда уже можно было считать тему исчерпаной.[/QUOTE]
Да я согласен, что так верстать вообще не хорошо ))) просто интересовался, а вдруг кому-нибудь из заказчиков захочется именно так )))) Будем считать тему исчерпанной... ))
[QUOTE=alekciy]Э нет... не путай ни себя, ни других ;) . div это div, слой это слой (см. z-index селектор). И смещивать этих два абсолютно разных понятия не только недопустимо, но и вредно.[/QUOTE]
Знаю я об z-index))
Слова настолько взаимоповязаны, что их часто употребляют как синонимы, например "верстка дивами", "верстка слоями", "блочная верстка", так сложилось давно после того, как DIV и SPAN заменили LAYER.
В данном случае это тем более слой, т.к. используется position:absolute или position:fixed.
[QUOTE=alekciy]Ну тогда уже можно было считать тему исчерпаной.[/QUOTE]
Да я согласен, что так верстать вообще не хорошо ))) просто интересовался, а вдруг кому-нибудь из заказчиков захочется именно так )))) Будем считать тему исчерпанной... ))
[QUOTE=alekciy]Э нет... не путай ни себя, ни других ;) . div это div, слой это слой (см. z-index селектор). И смещивать этих два абсолютно разных понятия не только недопустимо, но и вредно.[/QUOTE]
Знаю я об z-index))
Слова настолько взаимоповязаны, что их часто употребляют как синонимы, например "верстка дивами", "верстка слоями", "блочная верстка", так сложилось давно после того, как DIV и SPAN заменили LAYER.
В данном случае это тем более слой, т.к. используется position:absolute или position:fixed.
Цитата: Tokolist
Слова настолько взаимоповязаны, что их часто употребляют как синонимы, например "верстка дивами", "верстка слоями", "блочная верстка", так сложилось давно после того, как DIV и SPAN заменили LAYER.
В данном случае это тем более слой, т.к. используется position:absolute или position:fixed.
Ты знаешь... как раз во избежании различной трактовки, для работы в одной парадигме и были придуманы и используются спецификации, СНИПы, ГОСТы, RFC-ы и прочие нормативные акты. И в HTML, CSS спецификациях вполне четко и однозначно прописано, что div-ы это div-ы, что span-ы это span-ы и это другое, и что слои это слои и ни какие не дивы... и ни какого LAYER в HTML нет. И что там придумал Netscape это их дело тем более что этот браузер уже умер...
И ни о каких синонимах идти речи не может. Мы же не говорим, что Java это синоним JavaScript. Это абсолютно разные вещи. И отрицание этого факта говорит либо о не понимании, либо отрицании спецух от W3C.
2 alekciy
ок. спор бессмысленный. ты прав. проверь, пожалуйста, личку.
ок. спор бессмысленный. ты прав. проверь, пожалуйста, личку.
Цитата: Tokolist
Слова настолько взаимоповязаны, что их часто употребляют как синонимы, например "верстка дивами", "верстка слоями", "блочная верстка", так сложилось давно после того, как DIV и SPAN заменили LAYER.
Ерунда какая! :) Я верстаю блоками, но когда последний раз использовал слои - даже и не помню. Так что ж это такое получается?
<html><head>
<style type="text/css">
html,body {height:100%;width:100%; margin:0px; padding:0px;}
html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 100%;
background:green;
}
</style>
</head>
<body>
<table id="wrapper">
<tr><td>This is centered</td></tr>
</table>
</body>
</html>
перепробовал ваши коды и остановился на другом ))
<style type="text/css">
html,body {height:100%;width:100%; margin:0px; padding:0px;}
html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 100%;
background:green;
}
</style>
</head>
<body>
<table id="wrapper">
<tr><td>This is centered</td></tr>
</table>
</body>
</html>
перепробовал ваши коды и остановился на другом ))