2013-03-25 1 views
3

Я редактирования CSS-код в виде Wordpress темы (TwentyTen)Переполнение: видимые обвалы высота дел до нуля

Это мой HTML структура:

<body> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="main"> 
      <div id="filtri_di_ricerca"><img></div> 
      <div id="container"> 
       <div id="content"></div> 
      </div> 
     </div> 
     <div id="footer"></div> 
    </div> 
</body> 

и это мой CSS:

#main { 
    position:relative; 
    background:#fff; 
    overflow:visible; 
} 

#filtri_di_ricerca img { 
    position: absolute; 
    top: -96px 
} 

#filtri_di_ricerca { 
    position: absolute; 
    top: 0; 
    right: 20px; 
    width: 250px; 
    background-color: #E6E6E6; 
} 

мне нужно перекрывать #main DIV с #filtri_di_ricerca DIV, но когда я поставил overflow:visible на #main his height обвалов нулю ... Я все еще вижу #container и #content, но фон #main больше не виден ... Вместо этого я вижу #body.

ответ

2

Это связано с тем, как вычисляется высота div. Все зависит от содержимого, если оно не установлено фиксированным. Из-за переполнения: видимый, содержимое не нужно вставлять в div. Таким образом, высота div равна нулю.

Установите фиксированную высоту в div и он должен оставаться на этой высоте.

+0

содержание является динамическим, и это может быть очень заселена .. –

0

# Позиция CSS-элемента filtri_di_ricerca является «абсолютной» (так что выходите из естественного потока), а #container не имеет никакого контента.

Попробуйте добавить содержимое в #content и установить отступ-верх #content равной высоты # filtri_di_ricerca в

0

Вам нужно очистить поплавки для #main дел.

/* For modern browsers */ 
#main:before, 
#main:after { 
    content:""; 
    display:table; 
} 
#main:after { 
    clear:both; 
} 
/* For IE 6/7 (trigger hasLayout) */ 
#main { 
    zoom:1; 
} 

Read more on clearfix

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

  • Нет связанных вопросов^_^