Форум PHP программистов > Правильная вёрстка html

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Страницы: 1, 2

Guest

4.07.2016 - 10:39

Цитата (Zzepish @ 3.07.2016 - 16:44)

Wind
насколько не во всех?

http://caniuse.com/#search=flex

Можно его свободно уже использовать. Если постоянно думать о чем-то старом, можно навсегда застрять в web2000. Лучше предложить небольшому количеству посетителей обновить браузер, чем остановиться в развитии или тратить время на написание/поддержку кода для всяких полифиллов и прочего.

Нужно проще относиться, если основная аудитория уже готова к использованию новых фич их нужно внедрять, остальным предложить обновиться и всё.

Действовать также как разработчики клиентских приложений. Никто не будет писать Google Chrome version 50+ и отказываться от новых фич, только для того, чтобы приложение работало у 5% пользователей на компьютерах эпохи 2000ых.

Zzepish

4.07.2016 - 13:59

Guest
Ну, я, обычно, верстаю под основные браузеры, кроме IE (в него даже не смотрю). Если не будет поддерживаться, например, в хроме вообще , то юзать не буду. Если на какой-то старой версии начхать)

RootPM

19.10.2016 - 18:33

Цитата (SerginhoLD @ 3.07.2016 - 13:11)

есть вариант без лишнего тега:

<style>
.wrapper {
  min-height: 100%;
  margin-bottom: -70px; /* высота подвала */
  padding-bottom: 70px; /* высота подвала */
}

.footer {
  height: 70px;
}
</style>
<body>
  <div class="wrapper">wrapper</div>
  <footer class="footer">footer</footer>
</body>

Аналогично:

.wrapper {
  min-height: 100%;
}

.footer {
  height: 70px;
}

При этом если wrapper не заполнен на всю высоту экрана, footer выходит за область видимости.

_____________
Все будет офигенно. Кому-то сразу, кому-то постепенно.

RootPM

20.10.2016 - 08:45

Практическое применение FlexBox
CSS3 flexbox
Изучаем Flexbox

Справочник CSS - display
CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 26 May 2016

Сколько процентов пользователей потеряем при использовании FlexBox? )

_____________
Все будет офигенно. Кому-то сразу, кому-то постепенно.

RootPM

20.10.2016 - 09:49

Поэтому предлагаю вариант Медведя, но без лишнего тега. К слову работает даже в Internet Explorer 7.0

<!DOCTYPE html>
<html lang="ru">
<head>

	<!--[if lt IE 9]>
	 <script>
	  var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
	  for (var i = 0; i < e.length; i++) {
		document.createElement(e[i]);
	  }
	 </script>
	<![endif]-->

	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="wrapper">
	
		<header>
			шапка
		
			<nav>
				меню
			</nav>
			
		</header>
		
		<article>
			содержание
		</article>
		
	</div>
	
	<footer>
		подвал
	</footer>

</body>
</html>

@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	border: 0;
}
article, aside, figcaption, figure, footer, header, hgroup, nav, section, time {
	display: block;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
}
article {
	padding-bottom: 100px;
}
footer {
	margin-top: -100px;
	height: 100px;
}

_____________
Все будет офигенно. Кому-то сразу, кому-то постепенно.

Быстрый ответ:

Здесь расположена полная версия этой страницы.