Должен ли я устанавливать высоту контейнера?

У меня есть этот код:Должен ли я устанавливать высоту контейнера?

#container { 
    position:relative; 
    width:760px;  

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

    border: 1px solid #cdcdcd; 
} 

#sidebar { 
    float:left; 
    width: 200px; 
    background:red; 
} 

#wrapper { 
    float:left; 
    width:460px; 
background:blue;

}

и этот HTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <title>Example.com</title> 
     <link rel="stylesheet" type="text/css" href="style.css"/> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="sidebar"> 
         LEFT 
      </div> 

      <div id="wrapper"> 
       RIGHT 
      </div>   
     </div> 
    </body> 
</html>

Я вижу, что контейнер не имеет высоту .... я Должен установить? Я хотел бы объяснить высоту в зависимости от высоты внутренних DIVs. Как я мог это сделать?

источник

2012-05-03 Dail

Вы не должны установить высоту, просто добавьте:

<div style="clear: both;"></div>

непосредственно под любым дивы, что вы плавать.

В вашем случае, вы можете сделать это:

Просто добавьте в ваш файл CSS.

.clear { 
    clear: both; 
}

и обновить файл HTML, чтобы соответствовать

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <title>Example.com</title> 
     <link rel="stylesheet" type="text/css" href="style.css"/> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="sidebar"> 
         LEFT 
      </div> 

      <div id="wrapper"> 
       RIGHT 
      </div>  
      <div class="clear"></div>  
     </div> 
    </body> 
</html>

источник

2012-05-03 16:21:56

спасибо! если я не использую его, он не следует за высотой внутренних DIV, потому что он не может понять, есть ли другие элементы на концах? – Dail

@ Элементы с плавающей точкой удалены из потока документов и, таким образом, не влияют на «высоту» их родителей. 'clear: both' сообщает div, чтобы возобновить нормальный поток документов здесь и позволяет ему распознавать высоту –

Это происходит потому, что вы использовали float:left. Одним из решений является добавление clear:both DIV следующим образом:

CSS:

.clear { 
    clear: both; 
}

HTML:

<div id="container"> 
    <div id="sidebar">LEFT</div> 
    <div id="wrapper">RIGHT</div> 
    <div class="clear"></div> 
</div>

источник

2012-05-03 16:23:26 sp00m

Дайте контейнеру дополнительный CSS

overflow: hidden;

Это сломать плавать без дополнительной разметки
(не будет работать w ith box-shadow внутри)

источник

2012-05-03 16:37:22 HerrSerker

Должен ли я устанавливать высоту контейнера?

ответ

Смежные вопросы