Нет полосы прокрутки при использовании переполнения: auto и div div heights

Question

Это очень простой вопрос, но мой мозг не работает, и многочисленные попытки исправить это оказались безрезультатными. Я использую overflow: auto в родительском элементе, чтобы он растянулся на высоту дочернего элемента <div> s. Обычно это работает для меня, на этот раз это не работает: вместо этого он скрывает избыточную высоту и вставляет полосу прокрутки, чтобы я мог прокрутить вниз. Это не то поведение, которое я хочу. Вот HTML-код:

<div id="homecasestudy">
<h2 class="homecasestudyheading">Case Study</h2>
<div id="homecasestudyleft"><h3>Lorem</h3><p>Ipsum</p></div>
<div id="homecasestudyright">
<div id="casestudyfrontpic"><img src="uploads/casestudies/1/casestudyex1.jpg" border="0" /></div><div id="paperclip"></div>
<div id="homecasestudyquote">Quote</div>
</div>
</div><!-- homecasestudy -->

И CSS:

#homecasestudy {
    width:389px;
    min-height:257px;
    background:url(../images/casestudybgtop.jpg) #E5E6E7 no-repeat;
    padding:13px 0 0 13px;
    position:relative;
    overflow:auto;
    }

#homecasestudyleft {
    width:200px;
    min-height:130px;
    float:left;
    margin:20px 0 0 10px;
    }

h2.homecasestudyheading {
    width:366px;
    height:25px;
    background:url(../images/casestudytitlebg.jpg) no-repeat;
    color:#005BA7;
    margin:0;
    padding:6px 0 0 8px;
    font-size:16px;
    }

#homecasestudyright {
    float:left;
    min-height:180px;
    }

#casestudyfrontpic {
    width:154px;
    height:160px;
    background:url(../images/casestudyfrontpic.png) no-repeat;
    padding:6px 0 0 9px;
    position:absolute;
    top:13px;
    right:8px;
    }

#paperclip {
    width:33px;
    height:58px;
    background:url(../images/paperclip.png) no-repeat;
    position:absolute;
    top:1px;
    right:125px;
    }

#homecasestudyquote {
    color:#6E7071;
    font-size:14px;
    font-weight:bold;
    width:147px;
    position:absolute;
    top:180px;
    right:10px;
    margin:0;
    padding:0;
    }

Answer 1

Переполнение: авто не поможет вам здесь как способ очистить ваши поплавки. #homecasestudy расширяется, чтобы содержать дочерние элементы, но только до границ страницы.

Вы можете попробовать метод CSS-only для очистки div.

#homecasestudy:after {
  content:'.';
  clear: both;
  display: block;
  height: 0px;
  text-indent: -999999em;
}

Это создает элемент уровня блока после всего остального в #homecasestudy, использует его для очистки поплавков, затем выполняет некоторые приемы изменения размера, чтобы убедиться, что правило стиля не добавляет пробела.

Этот прием не будет работать в более ранних версиях IE. В этих случаях вы должны добавить zoom: 1 к правилу #homecasestudy вместо overflow: auto.

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

Смотрите рабочий пример здесь. Я удалил «абсолют» из поля цитаты в этом примере. http://dabblet.com/gist/2116495

Answer 2

В общем, если вы хотите, чтобы контейнер растягивался до его содержимого, не устанавливайте правило переполнения.Если вы хотите, чтобы контейнер растягивался, вы не устанавливаете для него высоту, а без высоты свойство переполнения ничего не делает.

Я бы предложил удалить правило min-height из #homecasestudy.Это позволит содержимому установить высоту контейнера, и вы не увидите полос прокрутки.Не требуется height или overflow правил.