1

Тема: HTA,HTML5: Растягиваемый middle, фиксированные top и bottom

Очень многие из моих HTA-окон состоят из таблицы с фиксированной высотой верхней и нижней ячейки.
В среднюю ячейку генерируется произвольная таблица с прокруткой.
Все было хорошо до того как мне захотелось попользовать прелести HTML5 и CSS3. Попробовал. Оказалось что mshta, хотя и не все, но достаточно много из новых фич поддерживает.
Но мой классический дизайн держать не хочет ни в какую. Никакое html,body {height:100%;} не помогает. Как я ни вымудрялся, даже DIV-ами пытался заменить таблицу, фиксированные размеры не соблюдаются, внутренняя таблица вылезает за прокрутку, при изменении размеров окна все едет и расползается.

<html>
<head>
<meta http-equiv="content-type" content="text-html; charset=utf-8">
<hta:application
	scroll="no"
 />
<style type="text/css">
	body { margin:0px; }
</style>
<script type="text/javascript">
	window.resizeTo(400, 600);
	function fillTable(){
		for (var i = 0; i < 50; i++) {
			var r = Info.insertRow();
			r.insertCell().innerText = 'name' + i;
			r.insertCell().innerText = 'value ' + i;
		}
	}
</script>
<title>html</title>
</head>
<body onload="fillTable()">
	<table style="height:100%; width:100%">
		<tr>
			<td style="height:80px; border:1px dotted blue;">
				Верхняя панель фиксированной высоты
			</td>
		</tr>
		<tr>
			<td>
				<!--Таблица с вертикальной прокруткой-->
				<div style="height:100%; width:100%; overflow-y:scroll; overflow-x:hidden; border:1px dotted red;">
					<table id="Info" style="width:100%;" border="1"></table>
				</div>
			</td>
		</tr>
		<tr>
			<td style="height:40px; border:1px dotted blue;">
				Нижняя панель фиксированной высоты
			</td>
		</tr>
	</table>
</body>
</html>

Вот так - все работает идеально. Добавляем <!DOCTYPE html> и все становится вкривь и вкось.
Так есть способ победить HTML5 или нет? (Повторюсь - ни слова о кроссбраузерности - ТОЛЬКО HTA).

2

Re: HTA,HTML5: Растягиваемый middle, фиксированные top и bottom

mozers, так ваш код и как html не сработает.

<!doctype html>
<html>
<head>
	<meta http-equiv="x-ua-compatible" content="ie=9" charset=utf-8";>
	<hta:application
		scroll="no"
	 />
	<style type="text/css">
		html, body {
			height: calc(100% - 3px);
			margin: 0;
		}
		#header, #footer  {
			border: 1px dotted blue;
			margin: 3px;
		}
		#header  {
			height: 80px;
			line-height: 80px;
		}
		#content  {
			height: calc(100% - 132px);
			overflow: auto;
			border: 1px dotted red;
			margin: 3px;
		}
		#Info  {
			width: 100%;
		}
		#Info td  {
			border: 1px solid #a0a0a0;
			border-right: 1px solid #f0f0f0;
			border-bottom: 1px solid #f0f0f0;
		}
		#footer  {
			height: 40px;
			line-height: 40px;
		}
	</style>
	<script type="text/javascript">
		window.resizeTo(400, 592);
		function fillTable(){
			for (var i = 0; i < 50; i++) {
				var r = Info.insertRow();
				r.insertCell().innerText = 'name' + i;
				r.insertCell().innerText = 'value ' + i;
			}
		}
	</script>
	<title>html</title>
</head>
<body onload="fillTable()">
	<p id="header">Верхняя панель фиксированной высоты</p>
	<div id="content">
		<table id="Info"></table>
	</div>
	<p id="footer">Нижняя панель фиксированной высоты</p>
</body>
</html>
Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

3

Re: HTA,HTML5: Растягиваемый middle, фиксированные top и bottom

2teadrinker
Запустил обе hta-шки (свою и предложенную) на Win7 c ie9.
1:1 при любых изменениях размеров окон. Браво, автор!
Только разрешите пару вопросов:

  • Мой код для HTML5 не подходит, но как обычный html отлично работает и в старом ХР с ie6 и в новейшем Win10. Возможно это потому что ie прощает какие то ошибки. А что заставило Вас, даже не проверив, сказать "ваш код и как html не сработает" ? Я чой то ничего криминального не вижу...

  • Ваш вариант в ХР с ie6 не работает. И хотя ie6 понятия не имеет о HTML5 мне бы не хотелось делать по 2 версии каждого приложения для старых и новых машин. Есть ли возможность написать универсальный код ? Пусть в ie6 фишки HTML5 работать не будут, но хотя бы базовый дизайн не должен страдать.

4

Re: HTA,HTML5: Растягиваемый middle, фиксированные top и bottom

mozers пишет:

как обычный html отлично работает и в старом ХР с ie6 и в новейшем Win10

Я проверил в IE 11 на Win 7 — футер уходит вниз. И на FF так же.

mozers пишет:

Ваш вариант в ХР с ie6 не работает

Не на чем протестировать, к сожалению. Предполагаю, что «doctype» нужно по-старому указать, и режим совместимости

<meta http-equiv="x-ua-compatible" content="ie=6" charset=utf-8";>

И ещё на ie6 не сработает calc(), нужно как-то по-другому позиционировать. Но ведь вначале речь о CSS3 шла. smile

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

5

Re: HTA,HTML5: Растягиваемый middle, фиксированные top и bottom

2teadrinker
Не надо мой код пробовать в IE, а тем более в FF! Я же уже говорил. Надо сохранить его с расширением .hta и запустить.
Конечно mshta часть функций тянет из установленного в системе IE, но отображение в окне HTA весьма отличается от того что мы видим в IE.

teadrinker пишет:

на ie6 не сработает calc()

Можно попробовать expressions, но его вроде как уже придушили... А без вычислений HTML5 уже не может?

6

Re: HTA,HTML5: Растягиваемый middle, фиксированные top и bottom

Ну, я в HTA совсем ничего не понимаю, но, конечно, я запускал ваш код с расширением hta. В первоначальном виде работает, но, как вы и написали, если добавить <!doctype html> — то нет. Я подумал, что если присутствует этот тег, то код должен быть корректной html-страницей, логично? Мой вариант работает и как html.

mozers пишет:

А без вычислений HTML5 уже не может?

Можно еще высоту блока в процентах указывать, а иначе только скриптом.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

7

Re: HTA,HTML5: Растягиваемый middle, фиксированные top и bottom

В процентах я уже пробовал. Если в обычном html задать фиксированный размер, то в оставшейся части можно задавать размер как 100% и браузер соображает что 100% - это не все окно, а лишь оставшаяся нефиксированная часть. Тупой HTML5 этого не понимает и отмеряет вычисленные эксперементально 75% от всего окна. В результате нужные размеры устанавливаются только при старте. Стоит изменить размеры окна - и все поехало...
Можно, конечно, менять размеры скриптом, но неужели разработчики HTML5, насовав разных плюшек, забыли о самом простом?
А может можно какое условие воткнуть (не скриптовое) что если браузер "не тянет" HTML5 то рисовать по старинке?

8

Re: HTA,HTML5: Растягиваемый middle, фиксированные top и bottom

mozers пишет:

HTML5 этого не понимает и отмеряет вычисленные эксперементально 75% от всего окна

Нет, от размера родительского блока.

mozers пишет:

А может можно какое условие воткнуть (не скриптовое) что если браузер "не тянет" HTML5 то рисовать по старинке?

Можно, но тоже только через скрипт.

Разработка AHK-скриптов:
e-mail dfiveg@mail.ru
Skype dmitry_fiveg

9

Re: HTA,HTML5: Растягиваемый middle, фиксированные top и bottom

2teadrinker
Еще раз СПАСИБО за интересный вариант, а главное - за правильное направление мысли!
Пошел думать...