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-ды бір қатарға қою керек. Мұны флексар арқылы жасайық:

#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;
}

Енді биіктікті қосамыз, себебі біздің элементтердің ішінде мазмұн жоқ. Бір элементке ғана биіктік қосу жеткілікті, себебі екінші флекс элементі биіктікке сәйкес бейімделеді (неге?). 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;
}