ორსვეტიანი საიტის ლეაუტის სქემა CSS-ში

მოდით, გავაკეთოთ ორსვეტიანი ლეაუტი შემდეგი სახის:

დასაწყისისთვის, შევქმნათ გვერდის ძირითადი სტრუქტურა:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="content">
			content
		</div>
		<div id="sidebar">
			sidebar
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

ახლა მივანიჭოთ სტილები wrapper-ს, გავამთავრებინოთ ის ეკრანის ცენტრში:

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

მივანიჭოთ ახლა header-ს და footer-ს სტილები:

#header {
	height: 200px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	border: 1px solid black;
}

როგორც ხედავთ, ჩვენ ვანიჭებთ header-ს და footer-ს სიმაღლეს. ჩვენ ამას ვაკეთებთ, რადგან ჩვენს სქემაში მათ არ გააჩნიათ შიგთავსი. შიგთავსის არსებობის შემთხვევაში ბლოკებს სიმაღლის მინიჭება არ ღირს - ის ჩამოყალიბდება მათი შიგთავსით.

ასევე მიაქციეთ ყურადღება იმას, რომ ჩვენ არ ვანიჭებთ მათ სიგანეს. საქმე იმაშია, რომ header და footer - ბლოკური ელემენტებია და მათი სიგანე ავტომატურად იქნება wrapper-ის სიგანის ტოლი.

მივანიჭოთ მათ padding, რათა ტექსტი არ მიეკრა საზღვრებს:

#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}

padding-ის არსებობა, თუმცა, ცუდად იმოქმედებს ბლოკების ზომებზე - ისინი გახდებიან უფრო დიდი, ვიდრე მითითებული იყო. მოდით შევცვალოთ ყველა ბლოკის ქცევა ისე, რომ padding და საზღვრები არ გაფართოებდეს ჩვენს ბლოკებს:

* {
	box-sizing: border-box;
}

ახლა ჩვენ გვჭირდება content და sidebar ერთ რიგში დავსვათ. გავაკეთოთ ეს flex-ების გამოყენებით:

#container {
	display: flex;
}

მივუთითოთ content-ს და sidebar-ს მათი სიგანე. ამ შემთხვევაში მათი სიგანეების ჯამი უნდა იყოს wrapper-ის სიგანის ტოლი:

#content {
	width: 800px;
}
#sidebar {
	width: 200px;
}

ვთქვათ, ჩვენ გვსურს გავაკეთოთ შეწევა sidebar-სა და content-ს შორის. ამ შემთხვევაში sidebar-ს საჭიროა მივუთითოთ margin. ამასთან, ჩვენ მოგვიწევს ვინმესგან მოვაცილოთ სიგანე ამ margin-ისთვის. მოვაცილოთ content-ს, შესაბამისად შევამციროთ მისი სიგანე:

#content {
	width: 780px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

ახლა მივუთითოთ სიმაღლე, რადგან ჩვენი ელემენტები არ შეიცავენ შიგთავსს. საკმარისია მხოლოდ ერთ ელემენტს მივუთითოთ სიმაღლე, რადგან მეორე flex ელემენტი სიმაღლეში მას მიუგრძელდება (რატომ?). მივუთითოთ სიმაღლე content-ს:

#content {
	width: 780px;
	height: 700px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

მივუთითოთ content-ს და sidebar-ს დანარჩენი სტილები:

#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}

ყველაფერი, ჩვენი ლეაუტი მზადაა. მოდით შევკრიბოთ მთელი კოდი ერთად:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="sidebar">
			sidebar
		</div>
		<div id="content">
			content
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

* {
	box-sizing: border-box;
}

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}
#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#container {
	display: flex;
}
#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}