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

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

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

html<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-ს, გავამთავრებინოთ ის ეკრანის ცენტრში:

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

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

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

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

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

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

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

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

css* {
  box-sizing: border-box;
}

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

css#container {
  display: flex;
}

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

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

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

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

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

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

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

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

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

html<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>

css* {
  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;
}