Как установить ту же высоту внутри DIV?

Question

Можно создать дубликат:
Maximize a floating div?

У меня есть этот HTML код:

<div id="container"> 


     <div id="sidebar"> 

      left 
      <br /><br /><br /><br /><br /><br /> 
     </div> 

     <div id="content"> 
      right 
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
      bla bla 
     </div> 

     <div class="clear"></div> 

    </div> 

и это код CSS:

#container { 
    width: 760px; 

    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 

    overflow: hidden; 
    background: #ffffff; 
    border: 1px solid #cdcdcd;  
} 

#sidebar { 
    float:left; 
    width:25%; 
    background:#555; 
} 

#content { 
    float:left; 
    width:75%; 
    background:#eee; 
} 


.clear { 
    clear: both; 
} 

к сожалению, боковая панель не имеет той же высоты, что и cointaner, как я могу увеличить ее высоту?

Благодаря

Answer 1

Вы можете установить цвет фона элемента контейнера к тому же цвет фона, как на боковой панели. Таким образом, было бы, по крайней мере, посмотреть, как боковая панель, простирается до дна.

Если вам нужна боковая панель до действительно простираются до конца, я думаю, что самый простой способ сделать это - использовать таблицу. Возможно, есть способ сделать это с помощью CSS, но я много искал и не нашел пути.

Answer 2

У вас есть более <br/> в вашем #content, а затем на боковой панели. Таким образом, весь # контейнер находится на высоте максимального элемента div, внутри которого находится #content, поэтому #sidebar кажется меньше. Либо поставьте столько же <br/> в #sidebar, либо запустите <br/> из обоих div и установите их как их высоты, например.

#sidebar{ 

height:100; 

} 

#content{ 

height:100; 

} 

Answer 3

не может быть именно то, что вы ищете, но попробуйте это:

<style> 
#container { 
    width: 760px; 

    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 

    overflow: hidden; 
    background: #ffffff; 
    border: 1px solid #cdcdcd;  
    position: relative; //Makes the children in the container positionable 
} 

#sidebar { 
    bottom: 0px; //position side bar. 
    left: 0px; //position side bar. 
    top: 0px; //position side bar. 
    width:25%; 
    background:#555; 
    position: absolute 
} 

#content { 
    margin-left: 25%; 
    width:75%; 
    background:#eee; 
} 


.clear { 
    clear: both; 
} 
</style> 
    <div id="container"> 


     <div id="sidebar"> 

      left 
      <br /><br /><br /><br /><br /><br /> 
     </div> 

     <div id="content"> 
      right 
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
      bla bla 
     </div> 

     <div class="clear"></div> 

    </div>