Ширина относительно высоты - HTML и CSS

Великий Саша · 29.10.2009, 12:39

Добрый день.
Уже долго не могу придумать как задать ширину дива в процентах относительно высоты экрана. Подскажите, как это сделать.

Нужно это для того чтоб отобразить квадратный див со стороной в 50% от высоты экрана (или клиентской части окна)

Arigato · 29.10.2009, 12:42

Первое, что приходит в голову - использование JavaScript.

Arigato · 29.10.2009, 12:57

Попробуйте что-то такое:

Код HTML:

<html>
<body>
<div style="background-color: silver; height: 50%; width: 50%" id="div">
</div>
<script type="text/javascript">
var size = (( window.innerHeight ) ? window.innerHeight : (( document.all ) ? document.body.offsetHeight : 640)) / 2;
document.getElementById("div").style.height = size;
document.getElementById("div").style.width = size;
</script>
</body>
</html>

Великий Саша · 29.10.2009, 13:18

Спасибо, а в чем разница между window.innerHeight и document.body.offsetHeight

Когда window.innerHeight и document.all могут возращать false
и почему в тако случае высота = 640?

Arigato · 29.10.2009, 13:20

Цитата:

Сообщение от Великий Саша

а в чем разница между window.innerHeight и document.body.offsetHeight

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

Цитата:

Сообщение от Великий Саша

Когда window.innerHeight и document.all могут возращать false
и почему в тако случае высота = 640?

Ну это так, заглушка. Если будет браузер, который ни того, ни другого способа не поймёт, сделаем квадрат со сторонами в 320 пикселей. При желании можно просто игнорировать изменение размеров, оставя исходные стили (но тогда это будет прямоугольник, а не квадрат).

Великий Саша · 29.10.2009, 13:24

Спасибо, о, кстати, а разве <script> не обязательно в <head>е ставить?

Arigato · 29.10.2009, 13:29

Нет. А в данном случае, вообще, обязательно в body и после требуемого div'а.

Великий Саша · 29.10.2009, 13:53

Из-за doctype скрипт не работает в хроме, сафари и фоксе.
Высоту он считает, но не задает.
Как это исправить?

29.10.2009, 12:39	#1
Великий Саша Новичок Джуниор Регистрация: 29.10.2009 Сообщений: 6	Ширина относительно высоты Добрый день. Уже долго не могу придумать как задать ширину дива в процентах относительно высоты экрана. Подскажите, как это сделать. Нужно это для того чтоб отобразить квадратный див со стороной в 50% от высоты экрана (или клиентской части окна)

29.10.2009, 12:42	#2
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,551	Первое, что приходит в голову - использование JavaScript. E-Mail: arigato.freelance@gmail.com

29.10.2009, 13:29	#7
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,551	Нет. А в данном случае, вообще, обязательно в body и после требуемого div'а. E-Mail: arigato.freelance@gmail.com

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Автоподбор высоты объединеных ячеек	tae1980	Microsoft Office Excel	14	21.03.2011 12:34
Автоподбор высоты	tae1980	Microsoft Office Excel	7	16.11.2010 18:01
Координаты высоты в треугольнике	UnChanter	Помощь студентам	1	19.10.2009 07:48
Ширина блока относительно "Шапки"	Noin	HTML и CSS	5	27.07.2009 08:39
Автоматическое увеличение высоты RichEdit	Kib	Общие вопросы Delphi	1	27.06.2009 19:56

29.10.2009, 13:18	#4
Великий Саша Новичок Джуниор Регистрация: 29.10.2009 Сообщений: 6	Спасибо, а в чем разница между window.innerHeight и document.body.offsetHeight Когда window.innerHeight и document.all могут возращать false и почему в тако случае высота = 640?

29.10.2009, 13:24	#6
Великий Саша Новичок Джуниор Регистрация: 29.10.2009 Сообщений: 6	Спасибо, о, кстати, а разве <script> не обязательно в <head>е ставить?

29.10.2009, 13:53	#8
Великий Саша Новичок Джуниор Регистрация: 29.10.2009 Сообщений: 6	Из-за doctype скрипт не работает в хроме, сафари и фоксе. Высоту он считает, но не задает. Как это исправить?