столбцы css: используйте доступную ширину

Question

Кто-нибудь знает способ сделать так, чтобы, когда div меню опущен, основной div использовал всю доступную ширину?

    +-------------- container -------------+
    |  +--- menu ---+  +---- main ------+  |
    |  |            |  |                |  |
    |  |            |  |                |  |
    |  +------------+  +----------------+  |
    +--------------------------------------+



    +-------------- container -------------+
    |  +------------- main -------------+  |
    |  |                                |  |
    |  |                                |  |
    |  +--------------------------------+  |
    +--------------------------------------+

Answer 1

Используйте ширину 100% на main. Э.Г.

CSS

<style type="text/css">
  #container {
    width: 300px; /* Fixed container width */
    height: 400px;  /* Height, just as an example */
    border: 1px solid red; /* Just to show the border of the container DIV */
  }

  #menu {
    width: 100px; /* Fixed menu width */
    height: 100%; /* Fill the height of the container */
    float: left; /* Float to the left, so the main can take the space to the right */
    border: 1px solid green; /* Just to show the border of the menu DIV */
  }

  #main {
    width: 100%; /* Fill the remaining width */
    height: 100%; /* Fill the height of the container */
    border: 1px solid blue; /* Just to show the border of the main DIV */
  }
</style>

HTML

<div id="container">
  <div id="menu">Menu</div>
  <div id="main">Main</div>
</div>

Пример с меню .

Пример со скрытым меню .

Редактировать: Только что исправили комментарии CSS.

Answer 2

<style type='text/css'>

.menu { 
       float: left;
       min-width: 20%; /* fix this to your happiness */
}

.main:after {
       content: "."; /* foo */
       display: block; 
       visibility: hidden;
       clear: both;
}

.main {
       width: 100%;
}

.menu + .main { 
       float: left; /* you can also make this right (play with it a bit ) */
       width: 80%;  /* work this out with happiness above !(see notes below) */
}

.menu[display=hidden] + .main {
       width: 100%;
}
</style>

<div class='container'>
<div class='menu'>
    Menu Content
</div>
<div class='main'>
    Main content
</div>
</div>

ПРИМЕЧАНИЯ:

ОК, так что вам нужно беспокоиться о следующем: если вы поместите какие-либо границы вокруг этих элементов, вам придется немного уменьшить ширину, чтобы учесть ширину границ.

Хороший способ на самом деле обеспечить надлежащий внешний вид - это обращаться с ними как с классами контейнеров и помещать в них фактические элементы содержимого.

.main: after {} должен заставить .main плавать должным образом в случае, если вы содержите это внутри другого div, а затем у вас будет содержимое ниже. :: After вставляет туда блок, который гарантирует, что вам не нужно будет помнить, чтобы поместить «clear: both» в стиль для следующего элемента блока (который, вероятно, вам нужен ниже этого набора)

Надеюсь, это поможет.

Answer 3

Не проверено, так как я набираю это с моего телефона:

<div id="container">
 <div id="menu" style="float:left;width:100px;margin:0 auto;height:100%"></div>
 <div id="main" style="float:right;width:auto;margin:0 auto;height:100%"></div>
</div>