Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > height 100% учитывая отступы

Автор: 0Z0NE 7.4.2013, 02:23

Доброго времени суток Уважаемые Знатоки, в жизни не мог подумать что будут проблемы с HTML, "никогда не говори никогда" )

Проблема следующего характера:
есть страница в которой везде height 100%. Соответственно всё хорошо и бзоблачно, но это лишь пока какой-то DIV не сделает большой отступ, к примеру самый верхний DIV с position:absolute и высотой 100px, вот при высоте 100% эти самые 100 пикселов и "уходят" вниз создавая скролл, вместо того что-б просто заполнить всё свободное пространтво. в растягиваемомм диве у меня таблица с двумя фреймами которые так-же тянуться на 100%, вот собственно надо что-б эти лишние 100 пикселей уходили в скрол не страницы а в скролл фреймов, если их контекнт вылазит за пределы фрейма ... Нууу как-то так...

Код


<body>
  <div id="header">
    &nbsp;
  </div>
  <div id="left">
    &nbsp;
  </div>
  <div class="floatbox">
    &nbsp;
  </div>
  <div id="main_box">
<table style="height:100%; width:100%; position: inherit; padding-right:5px;">
<tr style="height:100%;">
<td style="height:100%;">
<iframe id="message_frame" style="height:100%; width:100%" src="chat/message.php"></iframe>
</td>
<td style="width:200px; height:100%;">
<iframe style="width:200px; height:100%;" src="chat/users.php"></iframe>
</td>
</tr>
<tr>
<td colspan="2">
форма отправки сообщений
</td>
</tr>
</table>
  </div>
  </div>
</body>

Код


#header{
    height:100px;
    width:100%;
    margin-right:10px;
    right: 8px;
    background:#333333 url(img/banner.gif);
    background-position: right;
    background-repeat: no-repeat;
    position:absolute;
}
#main_box{
    height:100%;
    margin:0px;
    padding:0px;
    padding-left: 250px;
    background:#FFFFFF;

left это просто ниша которая резервирует место для плавающего DIV посему её CSS не привожу...

Автор: Arantir 7.4.2013, 02:54

Код


    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

Автор: 0Z0NE 7.4.2013, 14:16

Спасибо, помогло но отчасти ... приведу статистику:

Opera 12.14 : не работает (вот от кого не ожидал так от любимой оперы ...)
FireFox 20.0 : Всё хорошо и корректно
Netscape Navigator: 9.0.0.6 : Всё хорошо и корректно
Safari  5.1.7 : Всё хорошо и корректно
Maxthon 4.05.3000  : Всё хорошо и корректно
IE 8 : как обычно   smile

но на сих зверей я не ориентируюсь ибо как показала практика для IE надо совершенно другую версию сайта писать smile

вопрос как можно заставить оперу понимать сие чудо-свойство, вроде-ж CSS3 она поддерживает...

Автор: Arantir 7.4.2013, 14:45

Цитата(0Z0NE @ 7.4.2013, 13:16

)

Opera 12.14 : не работает (вот от кого не ожидал так от любимой оперы ...)

А странно, по утверждениям всех источников Opera понимает стандартное свойство box-sizing
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
http://caniuse.com/css3-boxsizing
http://htmlbook.ru/css/box-sizing

Причем даже в "частичную поддержку" значение border-box входит.

Автор: 0Z0NE 7.4.2013, 15:23

Да я с вами согласен и тоже видел на htmlbook пометку про поддержку, вроде даже от 7*й версии. Для оперы помогает указание padding-bottom: 100px; в div который и растягиваеться, вот думаю как заставить только оперу видеть это свойство, css данного div занёс в отдельный файл, уж больно много свойств получилось... Условные комментарии для оперы существуют вообще?)

З.Ы. конструкция вида <link href="css/opera.css" rel="stylesheet" type="opera/css"> не помогает, её видит хром и ломает дизайн но не видит опера smile

Во откопал кусочек правды http://cssdot.ru/Справочник_CSS/box_sizing-i403.html (правый столбец в низу с заголовком "Кроссбраузерная совместимость")

Была идея проверять с помощью PHP браузер и в случае Opera вместо обычного css файла подставлять css для оперы, но проблемно, вопервых Opera умеет представляться почти любым из установленных браузеров, неясно зачем но всё-ж (Настройки для сайта -> Сеть -> Идентификация браузера. Это к слову кому будет интересно) во вторых коль уже использовать такую фитчу то для каждого браузера писать свой CSS, естественно при редактировании оперделённая головная боль :( Хотелось-бы более простой и компактный вариант...

Автор: Arantir 7.4.2013, 17:36

Ну можно сделать через мой "любимый" универсальный интерфейс.

Если задать блоку

Код


position: absolute; left: 0; right: 0;

то его ширина будет равна 100% внутренней ширины родителя с учетом отступов, границ и прочего. То есть его margin'ы упрутся в края родительского блока (ближайшего блока с position: relative).
Как-то так: http://jsfiddle.net/eF3c8/
То же самое применимо и для высоты.

Исходя из этого можно целевой блок обернуть в некий wrapper, у которого position: relative и который ведет себя самым обычным образом, а внутри него будет блок, внешние размеры которого будут равны размерам wrapper'а.

Автор: 0Z0NE 7.4.2013, 18:35

Мдааа ... опера грубо говоря отчебучила ... при прописывании как Вы посоветовали в опере всё ок ... в хроме дизайн порван smile

всё-ж прийдёться для оперы писать отдельный CSS и вставлять его с помощью PHP...

однако всё-ж надеюсь на то что можно найти корректное решение ... в общем вопрос открыт ...

каюсь не увидел JS smile

счас попробую пересобрать)