Блок меняющий свою ширину в зависимости от наличия левого блока меню

203

10 апреля 2017, 04:21

Есть общая обёртка, шириной 1024px, внутри есть блок левого меню, и горизонтальный блок ссылок. Схематично всё можно представить так:

<div id="wrapper" style="width: 1024px">
<div id="left-menu" style="float: left; width: 200px;">
  <ul>
    <li>Меню 1
    <li>Меню 2
  </ul>
</div>
<div id="top-panel" style="border: 1px solid black;">
 <a>Ссылка 1</a><a>Ссылка 2</a>
</div>
</div>

Проблема в следующем. На некоторых страницах блока с левым меню нет. Если задать блоку top-panel:

style="width: 100%;"

Тогда он растягивается на весь блок в 1024px когда меню нет, а в случае появлению меню, текст в блоке смещается как нужно, но граница блока оказывается под блоком left-menu, что неприемлемо.

Если выставить display: inline для top-panel; то рамка не залазит под left-menu, но размер блока top-panel уменьшается до размера содержимого, что опять же неприемлемо.

В общем вопрос, как правильно сверстать блоки так, чтобы ширина блока top-panel всегда составляла всю доступную ширину родительского блока, уменьшаясь при появлении блока с меню?

Answer 1

Вариант с использованием display: flex

*{ 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
.wrapper {   
  display: flex; 
  border: 4px solid black; 
  margin-bottom: 10px; 
} 
.left-menu {  
  width: 200px;   
} 
.top-panel { 
  border: 1px solid black;   
  flex: 1 100%; 
}

<div class="wrapper"> 
  <div class="left-menu"> 
    <ul> 
      <li>Меню 1 
        <li>Меню 2 
    </ul> 
  </div> 
  <div class="top-panel"> 
    <a>Ссылка 1</a> 
    <a>Ссылка 2</a> 
  </div> 
</div> 
<div class="wrapper">   
  <div class="top-panel"> 
    Без левого сайдбара 
  </div> 
</div>

Вариант с использованием display: table

*{ 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
.wrapper {   
  display: table; 
  width: 100%; 
  border: 4px solid black;   
  margin-bottom: 10px; 
} 
.left-menu, 
.top-panel{ 
  display: table-cell; 
  vertical-align: top; 
} 
.left-menu {  
  width: 200px;   
} 
.top-panel { 
  border: 1px solid black;     
}

<div class="wrapper"> 
  <div class="left-menu"> 
    <ul> 
      <li>Меню 1 
        <li>Меню 2 
    </ul> 
  </div> 
  <div class="top-panel"> 
    <a>Ссылка 1</a> 
    <a>Ссылка 2</a> 
  </div> 
</div> 
<div class="wrapper">   
  <div class="top-panel"> 
    Без левого сайдбара 
  </div> 
</div>