растяжение div по заполнению.

@vooken · Регистрация: 22.03.2010

Author24 — интернет-сервис помощи студентам

Доброго времени суток. Подскажите, пожалуйста, как сделать растяжение дива по заполнению в нем текста. Т.е. имеем блок div с фоновым рисунком, в него будет писаться текст, мне нужно чтоб данный блок растягивался в обе стороны (в зависимости от разрешения конечного монитора) по объему текста. Иначе говоря, мало текста - поле маленькое, много - большое.

@cooperOk · 03.05.2010, 17:02

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#a{
    border: 1px solid #00f;
    background: url("someImg.jpg") no-repeat;
    position: absolute;
    max-width: 100%;
}
</style>
 
<script type="text/javascript">
function divPosition()
{    
    document.getElementById("a").style.left = screen.availWidth/2 - document.getElementById("a").offsetWidth/2 + "px";
}
</script>
</head>
<body onload="divPosition()">
 
<div id="a">fghfgh ffffdf fghfgdffffff ffffffdff hfghs fffffffff fdffghfghsdfffff fffffffdff fghsdffffff fffffffdf sdf sdf sdf sdfdd</div> 
 
</body>
</html>

@xxxNEIxxx · 03.05.2010, 20:28

а без скрипта можешь попробывать задать блоку min-height: 0;, min-weight 0;, max-height:100%; и max-weight100%;. должно получиться. но при этом размер задней картинки не увеличиться, разве что repeat пропишешь для заполнения.

@vooken · 10.05.2010, 23:39 **[ТС]**

cooperOk, Спасибо, сразу разобрался.
xxxNEIxxx, не пробовал твой вариант, но всё равно Спасибо!

@xxxNEIxxx · 11.05.2010, 02:11

кажись я чёто не доганяю)) растягивался в обе стороны - это типа одновременно или что? просто скорее всего по отношению к вопросу я написал фигню))) cooperOk, плиз напиши суть твоего скрипта, просто возможно когда то понадобиться

@cooperOk · 11.05.2010, 11:47

Так как по умолчанию див занимает 100% ширины, чтоб он принимал размеры внутреннего контента я ему указал position: absolute; А так как простым margin: 0 auto; его не отцентрируешь, я написал простенький скрипт для центрирования дива. Не хотелось заморачиваться с margin-left: 50%; и т.д. лучше уж так.

@xxxNEIxxx · 12.05.2010, 01:57

суть я понял, но разве position: absolute; это не просто позиционирование относительно родительского блока или окна браузера?

@cooperOk · 12.05.2010, 11:18

Ну помимо позиционирования оно еще дает свои нюансы.

@MAZUR777 · 12.05.2010, 15:25

cooperOk помоги пожалуйста с этим (используя блокнот)

В среде HTML разработать главную страницу сайта. На произвольном фоне расположить карту ( в папке «Экзамен» файл с именем karta), занимающую 90% рабочей области Web-страницы. На этом рисунке создать карту ссылок, включающую активные области в виде круга, прямоугольника, треугольника. В качестве других страниц сайта можно использовать любые файлы.

@vooken 0 / 0 / 0 Регистрация: 22.03.2010 Сообщений: 4
		1
	растяжение div по заполнению. 03.05.2010, 16:23. Показов 5508. Ответов 8 Метки нет (Все метки) Доброго времени суток. Подскажите, пожалуйста, как сделать растяжение дива по заполнению в нем текста. Т.е. имеем блок div с фоновым рисунком, в него будет писаться текст, мне нужно чтоб данный блок растягивался в обе стороны (в зависимости от разрешения конечного монитора) по объему текста. Иначе говоря, мало текста - поле маленькое, много - большое. 0

@xxxNEIxxx 28 / 28 / 2 Регистрация: 21.04.2010 Сообщений: 121
	03.05.2010, 20:28	3
	а без скрипта можешь попробывать задать блоку min-height: 0;, min-weight 0;, max-height:100%; и max-weight100%;. должно получиться. но при этом размер задней картинки не увеличиться, разве что repeat пропишешь для заполнения. 0

@vooken 0 / 0 / 0 Регистрация: 22.03.2010 Сообщений: 4
	10.05.2010, 23:39 [ТС]	4
	cooperOk, Спасибо, сразу разобрался. xxxNEIxxx, не пробовал твой вариант, но всё равно Спасибо! 0

@xxxNEIxxx 28 / 28 / 2 Регистрация: 21.04.2010 Сообщений: 121
	11.05.2010, 02:11	5
	кажись я чёто не доганяю)) растягивался в обе стороны - это типа одновременно или что? просто скорее всего по отношению к вопросу я написал фигню))) cooperOk, плиз напиши суть твоего скрипта, просто возможно когда то понадобиться 0

@cooperOk 60 / 60 / 6 Регистрация: 12.11.2009 Сообщений: 169
	11.05.2010, 11:47	6
	Так как по умолчанию див занимает 100% ширины, чтоб он принимал размеры внутреннего контента я ему указал position: absolute; А так как простым margin: 0 auto; его не отцентрируешь, я написал простенький скрипт для центрирования дива. Не хотелось заморачиваться с margin-left: 50%; и т.д. лучше уж так. 0

@xxxNEIxxx 28 / 28 / 2 Регистрация: 21.04.2010 Сообщений: 121
	12.05.2010, 01:57	7
	суть я понял, но разве position: absolute; это не просто позиционирование относительно родительского блока или окна браузера? 0

@cooperOk 60 / 60 / 6 Регистрация: 12.11.2009 Сообщений: 169
	12.05.2010, 11:18	8
	Ну помимо позиционирования оно еще дает свои нюансы. 0

@MAZUR777 610 / 135 / 132 Регистрация: 15.04.2010 Сообщений: 554
	12.05.2010, 15:25	9
	cooperOk помоги пожалуйста с этим (используя блокнот) В среде HTML разработать главную страницу сайта. На произвольном фоне расположить карту ( в папке «Экзамен» файл с именем karta), занимающую 90% рабочей области Web-страницы. На этом рисунке создать карту ссылок, включающую активные области в виде круга, прямоугольника, треугольника. В качестве других страниц сайта можно использовать любые файлы. 0

Опции темы