Я некоторое время боролся с этой проблемой CSS, и никакие ответы в Интернете, кажется, не работают для меня (я провел последние несколько дней, читая так много постов).
Проблема, с которой я столкнулся, состоит в том, что есть три элемента div, оборачивающих динамический контент, и по мере роста содержимого (содержимое скрывается в начале, а затем показывается с помощью Jquery, нажимая на заголовки для каждого растущего раздела), неправильно расширяется, как в любом другом браузере (включая FF 3.0).
Я пробовал min-height, overflow: auto, overflow: hidden, height: 100%, все. С переполнением: авто, я получаю полосы прокрутки и только один из div, корректирующих должным образом внутри полос прокрутки. С переполнением: скрыто, содержимое просто скрыто, да ха. А потом min-height и height ничего не сделали, кроме как выпустить содержимое.
Вот CSS для трех элементов:
// outher div, it's floating left next to a leftbar
div#conwrap {
background: #C0E7F4;
width: 810px;
margin: 0;
float: left;
}
/* For 2 column layout */
div#main_wide {
margin: 20px 20px 20px 20px;
}
// Inner div. The main one I want to expand.
div.round {
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
background: #fff;
padding: 10px;
margin: 0 0 0px 0;
}
А затем HTML для содержимого внутри div.round:
/* Block for education details */
<h3 class="edit_type" id="education">Education</h3>
<ul>...</ul>
<div class="clear"></div>
/* Block for account details */
<h3 class="edit_type" id="account">Account</h3>
<ul>...</ul>
<div class="clear"></div>
И так далее ... (есть еще три блока)
Используя Jquery, все атрибуты скрываются в начале, а затем отображаются или скрываются при нажатии на h3.
Любая помощь?
Большое спасибо !!!!!!