Почему мой контент переполнен из div?

Question

Вот вопрос: У меня есть HTML:

<div id="container"> 
    <div id="fixedImg"></div> 
     <div id="content" class="clearfix"> 
    asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 
    df<br />asdf <br /> asdf <br /> 

    </div> 
</div> 

и связанного с CSS

#container { 
    width: 990px; 
    margin-right: auto; 
    margin-left: auto; 
    padding-top:14px; 

} 
#fixedImg { 
    float: left; 
    width: 300px; 
    background-image: url(../images/pageBg.jpg); 
    background-repeat: repeat-y; 
} 
#content { 
    float: left; 
    width: 690px; 
    border-bottom: solid #000 1px; 
    background-color:#CC0000; 
    overflow:auto; 
} 

но когда я сделать это в любом браузере (IE, Chrome) контента из 'Содержание' DIV получают переполнение.

Содержимое div динамически увеличивает высоту в зависимости от высоты окна (правильное использование функции JavaScript). Текст/содержимое следует форматировать с помощью полосы прокрутки.

---

РЕШЕНИЕ:

Проблема была в моем конце внутри функции JavaScript, в строке, где я присваивающей высоту до «Содержание» DIV, я назначая minHeight, а не высоту. исправленная строка кода приведена ниже.

document.getElementById('content').style.height = ht; 

Теперь его рабочий штраф. Я даю функцию JavaScript, как вычислить экран:

<script language="javascript"> 
function getscreenInfo() { 
var w = window, 
    d = document, 
    e = d.documentElement, 
    g = d.getElementsByTagName('body')[0], 
    x = w.innerWidth || e.clientWidth || g.clientWidth, 
    y = w.innerHeight|| e.clientHeight|| g.clientHeight; 
    ht = y - 197; 

    y += "px"; 
    document.getElementById('footer').style.top = y; // this will keep the 'footer' div below the visible screen. User will look at it only if he scrolls down to the bottom. 
    ht += "px"; 
    //alert(ht); 
//alert (document.getElementById('footer').style.top); 
    document.getElementById('fixedImg').style.height = ht; 
    document.getElementById('content').style.height = ht; 

} 
</script> 

Answer 1

#container{ 
overflow:scroll; 
} 

Добавить эту линию, должно работать.

Answer 2

Здесь решение вашей probem:

вы должны использовать {высота: авто;} в сНу CSS.