IE7의 추가 스크롤 막대는 어디에서 제공됩니까?

헤더 및 왼쪽 메뉴와 내용 창이있는 고정 된 프레임 페이지를 시뮬레이트하는 CSS 레이아웃이 있습니다.IE7의 추가 스크롤 막대는 어디에서 제공됩니까?

Firefox의 경우이 방법은 매우 유용하지만이지만 Internet Explorer 7에서는 오른쪽에 추가 스크롤 막대가 있습니다. 추가 스크롤 막대를 마우스로 움직이면 머리글 만 페이지 위쪽으로 스크롤합니다. IE7이 왼쪽 메뉴의 height: 100%을 헤더 아래 영역이 아닌 페이지 전체 높이로 해석하는 것과 거의 같습니다.

이 문제를 해결할 방법이 있습니까?

내 CSS :

body{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    overflow: hidden; 
    height: 100%; 
    max-height: 100%; 
} 

#framecontentTop { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    width: auto; 
    height: 100px; /*Height of top frame div*/ 
    overflow: hidden; /*Disable scrollbars.*/ 
    background-color: #90B3DC; 
    color: white; 
} 

#framecontentLeft { 
    position: absolute; 
    top: 100px; 
    left: 0; 
    bottom: 0; 
    width: 300px; /*Width of left frame div*/ 
    height: 100%; 
    overflow: hidden; /*Disable scrollbars.*/ 
    background-color: #90B3DC; 
    color: white; 
} 

#maincontent{ 
    position: fixed; 
    left: 300px; /*Set left value to WidthOfLeftFrameDiv*/ 
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/ 
    right: 0; 
    bottom: 0; 
    overflow: auto; 
    background: #fff; 
} 

.innertube{ 
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ 
}

내 HTML :

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS Left and Top Frames Layout</title> 
<link href="Frames.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript"> 
/*** Temporary text filler function. Remove when deploying template. ***/ 
var gibberish=["This is just some filler text", "Lorem ipsum dolor sit amet", "nothing to read here"] 
function filltext(words){ 
for (var i=0; i<words; i++) 
document.write(gibberish[Math.floor(Math.random()*3)]+" ") 
} 
</script> 

</head> 

<body> 
    <div id="framecontentLeft"> 
     <div class="innertube"> 
      <h3>Sample text here</h3> 
     </div> 
    </div> 

    <div id="framecontentTop"> 
     <div class="innertube"> 
      <h1>CSS Left and Top Frames Layout</h1> 
      <h3>Sample text here</h3> 
     </div> 
    </div> 

    <div id="maincontent"> 
     <div class="innertube"> 
      <h1>Content Title</h1> 
      <p><script type="text/javascript">filltext(255)</script></p> 
     </div> 
    </div> 
</body> 
</html>

출처

2009-11-06 Robert Harvey

IE7 실제로 전체 페이지 높이로 100 %를 해석합니다. 왼쪽 메뉴가 맨 위에서 시작하도록 할 수는 없습니까? 0px 및 100px의 패딩 윗부분이 있습니까?

왼쪽 메뉴를 fixedabsolute으로 변경하십시오.

출처

2009-11-06 23:54:00

작동하지 않았습니다. 예상대로 채우기가되었지만 두 번째 스크롤 막대가 그대로있어 동일한 동작을 보입니다. –

패딩이 원인입니다. 내가 원하는 것은 높이 (100 % 빼기)입니다. –

링크를 게시 할 수 있습니까? –

IE7의 추가 스크롤 막대는 어디에서 제공됩니까?

답변

관련 문제