LINUX.ORG.RU

position: absolute — насколько это приемлемо?

 , , , ,


0

1

Сейчас сверстал простенькую страницу-шаблон.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>absolute</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<article>
	article
	</article>
	<nav>
	nav
	</nav>
	<aside>
	aside
	</aside>
	<header>
	header
	</header>
	<footer>
	footer
	</footer>
</body>
</html>
html, body {
  backgroung-color: #fff;
  font-family: Helvetica, sans-serif;
  color: #000;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
header {
  background-color: #555;
  position: absolute;
  top: 0;
  width: 100%;
  height: 10em;
}
article {
  background-color: #666;
  position: absolute;
  top: 10em;
  left: 25%;
  right: 25%;
  width: 50%;
  height: 40em;
}
nav {
  background-color: #888;
  position: absolute;
  left: 0;
  top: 10em;
  width: 25%;
  height: 40em;
}
aside {
  background-color: #888;
  position: absolute;
  right: 0;
  top: 10em;
  width: 25%;
  height: 40em;
}
footer {
  background-color: #555;
  position: absolute;
  bottom: 0;
  height: 10em;
  width: 100%;
}
Это SEO-friendly вёрстка: можно поставить блоки в html в любом порядке, отображаться они будут всегда одинаково.
Вопроса два. Первый: такая вёрстка нормальна или в приличном обществе за такое бьют? Второй: как сделать (желательно без js) так, чтобы у article, aside и nav высота подстраивалась под размер экрана (height: 100%)?
UPD: я написал костыль на jquery, покритикуйте:
$(document).ready(fit);
$(window).resize(fit);
function fit() {
	var height = $(document).height() - $("header").height() - $("footer").height();
	$("nav, aside, article").height(height);
}

★★★★★

$(document).ready(function () {
	fit();
});
$(window).resize(function(){
	fit();
});

вообще пушка, сразу видно голову даже не включал когда писал

$(document).ready(fit) зачем еще одна функция?

$("nav").height(height);
	$("aside").height(height);
	$("article").height(height);

аналогично $(«nav, aside, article»).height(height)

не уверен, правда, что height задает высоту а не css(height:), но если работает то ок.

еще в подобных скриптах обычно возникает бок, не знаю насколько твой код ему подвержен. когда ты выставляешь эти размеры ($(«nav, aside, article»).height(height)) это уже влияет на высоту документа, тоесть, после первой установки в последующих пересчетах ты будешь получать не фактическую высоту, а с учетом предыдущего пересчета и высоты твоих блоков заданных уже вручную. потому я сначала делаю сброс в css(height: 'auto'), потом выполняю пересчет (возможно асинхронно) и затем уж устанавливаю. надеюсь, понятно объяснил

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

Да, по первому уже поправил, про то, что можно указывать элементы через запятую даже не знал. Спасибо.
Вообще жутко не люблю js, ибо не могу в него.

CYB3R ★★★★★ ()

Вопроса два. Первый: такая вёрстка нормальна или в приличном обществе за такое бьют?

Ненормальна. Absolute это костыль и обычно используется там, где по другому никак.

Второй: как сделать (желательно без js) так, чтобы у article, aside и nav высота подстраивалась под размер экрана (height: 100%)?

Что-то вроде: http://jsfiddle.net/Y4Sn3/

eth1 ()
Ответ на: комментарий от CYB3R

например, есть окно, в нем некий элемент, столбец, который надо вытягивать на (высота окна - 10пикселей). ты открываешь сайт, сраатывет колбек, высота выставляется (жестко в пикселях). затем, ты уменьшаешь окно, но так как высота столбца уже выставленна жестко, документ не уменьшится меньше этой высоты, не потому что в нем так много контента, а лишь из-за того что предыдущий расщет зафиксировал столбец. потому в ресайзе сначала надо «сбрасывать» все эти жесткозаданные высоты чтоб получить реальную высоту контентной области, без учета подпорок, и затем пересчитать жесткие высоты. не знаю как еще объяснить. рисовать пример?

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

Если я правильно понял, то так неправильно:

1. Задание высоты
2. Событие «Ресайз»:
   2a. задание высоты (которое не происходит)
А так правильно:
1. Задание высоты
2. Событие «Ресайз»:
   2a. сброс высоты на auto
   2b. задание высоты (срабатывает правильно)
Верно?

CYB3R ★★★★★ ()
Ответ на: комментарий от trashymichael

Всё, понял, о чём ты. Если бы сам не столкнулся, не понял бы. Сначала подумал: «Что за странный баг?», а потом перечитал твои посты и понял, в чём соль. Итак, я придумал свой воркэраунд: вместо document используем window. Работает правильно.

CYB3R ★★★★★ ()
Ответ на: комментарий от CYB3R

Вообще жутко не люблю js, ибо не могу в него.

аналогично.

по сабжу: я бы бил нещадно за нелогичное расположение элементов на странице. начни заново в стиле академической вёрстки.

funeralismatic ★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.