Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.05.2018, 16:49
Новичок на форуме
Отправить личное сообщение для AnatoliyBytskiyy Посмотреть профиль Найти все сообщения от AnatoliyBytskiyy
 
Регистрация: 16.04.2018
Сообщений: 5

Структура сайта
Привет, подскажите как реализовать такую модель:
Нужно что б "хедер" и "футер" были прижаты соответственно к верхней и нижней части экрана (не fixed) да так что б при удалении центральной части "контент" они так и оставались прижатыми.

Помогите Христа ради.
Изображения:
Тип файла: jpg Безымянный.jpg (8.3 Кб, 6 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 07.05.2018, 17:23
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

А если контент больше оставшейся части, подвал опускаться должен или контент под него залазить?
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2018, 18:50
Новичок на форуме
Отправить личное сообщение для AnatoliyBytskiyy Посмотреть профиль Найти все сообщения от AnatoliyBytskiyy
 
Регистрация: 16.04.2018
Сообщений: 5

Ответ на вопрос
Должен опускаться
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2018, 18:52
Новичок на форуме
Отправить личное сообщение для AnatoliyBytskiyy Посмотреть профиль Найти все сообщения от AnatoliyBytskiyy
 
Регистрация: 16.04.2018
Сообщений: 5

Основные блоки сайта head, content, footer должны быть самостоятельными. То есть при удалении какого-либо блока верстка не должна распадаться. При удалении блока content верхняя и нижняя части макета должны быть прижаты к верху и к низу окна браузера соответственно.
Ответить с цитированием
  #5 (permalink)  
Старый 07.05.2018, 21:02
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<style>
		
		html, body {
			width: 100%; height: 100%;
			margin: 0;
		}

		body {
			display: grid;
			grid-template-rows: auto 1fr auto;
		}

		header {
			grid-row: 1;
			background: yellowgreen;
		}

		main {
			grid-row: 2;
			background: gold;

			/*для примера изменение размера*/
			overflow: auto;
			resize: vertical;
		}

		footer {
			grid-row-end: -1;
			background: yellowgreen;
		}
	</style>
</head>
<body>
	<header>header</header>
	<main>сontent</main>
	<footer>footer</footer>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 08.05.2018, 20:00
Новичок на форуме
Отправить личное сообщение для AnatoliyBytskiyy Посмотреть профиль Найти все сообщения от AnatoliyBytskiyy
 
Регистрация: 16.04.2018
Сообщений: 5

Ты гений, спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Браузер внутри сайта (аналоги iframe) holop Общие вопросы Javascript 3 10.03.2017 23:56
При вводе названия сайта, в поисковой системе, отображался каталог из разделов сайта? MSDeveloper (X)HTML/CSS 1 04.10.2014 12:32
background resize IceDvl jQuery 4 25.04.2014 17:54
передача данных из форм своего сайта в формы стороннего сайта najrobi Общие вопросы Javascript 19 15.07.2012 22:18
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55