Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Резиновый div на странице, необходимо блок масштабировать белый div 
V
    Опции темы
AGENTxXx
Дата 29.5.2013, 23:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 8.6.2009

Репутация: нет
Всего: 1



Доброго времени суток!
Столкнулся вот с такой проблемой:
Необходимо масштабировать div элемент (которые белым бордером).
Т.е. мне нужно, чтобы этот div был с верху с отступом в несколько пикселей и снизу (ну т.е. как на рисунке). Необходимо, чтобы при масштабировании окна так все и сохранилось. 
Используя position:absolute только смог сделать с width 100% и height 100%, а мне нужно типа того, но ужать по вертикале и по горизонтали с помощью margin'а внешнего элемента, но т.к. absolute - то ужать уже не получается....
user posted image
Может кто сможет помочь? 

Спасибо!

P.S. Нужно использовать только CSS 2.0
PM MAIL   Вверх
AGENTxXx
Дата 31.5.2013, 13:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 8.6.2009

Репутация: нет
Всего: 1



Может что-то нужно пояснить? 

С помощью js знаю как это сделать, а вот с помощью CSS 2.0 - все еще не могу додумать... 
PM MAIL   Вверх
AGENTxXx
Дата 6.6.2013, 11:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 231
Регистрация: 8.6.2009

Репутация: нет
Всего: 1



Все же придумал способ это сделать (может конечно есть более простой способ, но в chrome работает как надо.
Может кому-то пригодится, или кто-что добавит (уберет).

В общем, код:
Код

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script type="text/javascript">
</script>
<body style="background:purple; margin:0px; padding:0px;">
    <div style="border-top:1px solid white; position:absolute; width:100%; height:99%; overflow:hidden;">
        <div style="height:100%; border-bottom:1px solid white; margin-left:5px; margin-right:62px;  overflow:hidden; margin-top:-60px; ">
        <div style="margin-top:100px; background:blue; border:1px solid white; height:100%;">
            Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст 
        </div>
        </div>
    </div>
</body>
</html>

user posted image
Остальные элементы добавляем просто с position:absolute  и используем top:0, bottom:0, right:0.


PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1543 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.