내 콘텐츠가 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, 크롬) '콘텐츠'의 내용에 렌더링 할 때 사업부를 얻고있다 과다.

콘텐츠 div는 창 높이에 따라 동적으로 높이를 가져옵니다 (자바 스크립트 기능을 사용하여 올바르게 가져 오기). 텍스트/내용은 스크롤 막대를 사용하여 포맷해야합니다.

---

해결 방법 :

문제는 내가 '콘텐츠'DIV의 높이를 할당 한 줄에서 자바 스크립트 함수 안에 내 말에 있었다, 나는 높이보다는 minHeight을 할당했다. 수정 된 코드 행은 다음과 같습니다.

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

이제 제대로 작동합니다. 나는 화면을 계산하는 방법을 자바 스크립트 기능을 제공하고있다 :

<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의 솔루션 :

당신이 사용할 필요가

{높이 : 자동;} DIV CSS를한다.