Разделение страницы на 3 независимых вертикальных блока

365

15 марта 2018, 08:13

Задача состоит в том, что необходимо разделить на три части страницу. Два сайдбара слева и справа, и контент посередине. Ширина каждого блока статическая и главное что блок с контентом должен отображаться по центру.

Неожиданно возникли проблемы с такой задачей и нигде не могу найти решение, уже вроде все перепробовал и интернет прошерстил.

Вот что у меня вышло с помощью display: table. Но блоки между собой очень зависимы, и я даже не могу воспользоваться какими-либо отступами для контента, не затрагивая другие блоки.

HTML:

<div class="page-wrapper">
  <div class="left-panel-wrapper">
    <div class="left-panel">
      some content some content some content some content some content some content some content some content some content
    </div>
  </div>
  <div class="content-wrapper">
    <div class="content">
      some content some content some content some content some content some content some content some content some content
    </div>
  </div>
  <div class="right-panel-wrapper">
    <div class="right-panel">
      some content some content some content some content some content some content some content some content some content
    </div>
  </div>
</div>

CSS:

.page-wrapper {
  display: table;
  width: 100%;
  height: 100%;
}
.left-panel-wrapper, .right-panel-wrapper {
  display: table-cell;
  width: 100px;
  height: 100%;
  background-color: #f6f8fa;
}
.left-panel, .right-panel {
  display: inline-block;
}
.content-wrapper {
  display: table-cell;
}
.content {
  width: 100px;
  margin: 0 auto;
}

https://jsfiddle.net/qwnnaLjy/21/

Answer 1

Используйте flex

.page-wrapper { 
  display: flex; 
  justify-content: space-between; 
} 
.left-panel-wrapper { 
  width: 200px; 
  background-color: orange; 
} 
.right-panel-wrapper { 
  width: 200px; 
  background-color: green; 
} 
.content-wrapper { 
  /*width: 250px;*/ 
  width: calc(100% - 400px); 
  padding: 0 30px; 
}

<div class="page-wrapper"> 
  <div class="left-panel-wrapper"> 
    <div class="left-panel"> 
      some content some content some content some content some content some content some content some content some content 
    </div> 
  </div> 
   
  <div class="content-wrapper"> 
    <div class="content"> 
     some content some content some content some content some content some content some content some content some content 
     some content some content some content some content some content some content some content some content some content 
    </div> 
  </div> 
   
  <div class="right-panel-wrapper"> 
    <div class="right-panel"> 
      <p>some content some content some content some content some content some content some content some content some content </p> 
    </div> 
  </div> 
</div>

на inline-block с костылём

.page-wrapper { 
  text-align: justify; 
  overflow: hidden; 
  min-width: 1000px; 
} 
.page-wrapper:after { 
  content: ''; 
  width: 100%; 
  display: inline-block; 
} 
.left-panel-wrapper { 
  display: inline-block; 
  width: 200px; 
  background-color: orange; 
  vertical-align: top; 
} 
 
.right-panel-wrapper { 
  display: inline-block; 
  width: 200px; 
  background-color: green; 
  vertical-align: top; 
} 
 
.content-wrapper { 
  display: inline-block; 
  vertical-align: top; 
  width: 500px; 
  margin: 0 auto; 
  padding: 0 10px; 
} 
 
/* костыль */ 
.left-panel-wrapper, 
.right-panel-wrapper, 
.content-wrapper { 
  position: relative; 
} 
.left-panel-wrapper:before, 
.right-panel-wrapper:before, 
.content-wrapper:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 9000px; 
  background: red; 
  z-index: -1; 
}

<div class="page-wrapper"> 
  <div class="left-panel-wrapper"> 
    <div class="left-panel"> 
      some content some content some content some content some content some content some content some content some content 
    </div> 
  </div> 
   
  <div class="content-wrapper"> 
    <div class="content"> 
     some content some content some content some content some content some content some content some content some content 
     some content some content some content some content some content some content some content some content some content 
    </div> 
  </div> 
   
  <div class="right-panel-wrapper"> 
    <div class="right-panel"> 
      <p>some content some content some content some content some content some content some content some content some content </p> 
    </div> 
  </div> 
</div>

Суть в том, что обвертки даёте overflow: hidden; а каждой колонки подкладку в виде before, через absolute, что создаёт вид background.