CSS 레이아웃에서 스크롤 다운 문제를 해결하는 방법

저는 CSS 전문가가 아니며 템플릿에 문제가 있습니다. 문제는 스크롤 다운입니다. 나는 모든 템플리트에 정확하게 놓을 수는 없다.CSS 레이아웃에서 스크롤 다운 문제를 해결하는 방법

여기 템플릿의 전체 코드가 있습니다. 복사하여 붙여 넣기 만하면됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title> 
<style type="text/css" media="screen"> 
    #printhead {display:none;} 

    html { 
     height:100%; 
     max-height:100%; 
     padding:0; 
     margin:0; 
     border:0; 
     background:#fff; 
     font-size:80%; 
     font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif; 
     /* hide overflow:hidden from IE5/Mac */ 
     /* \*/ 
     overflow: hidden; 
     /* */ 
    } 

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

    #content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;} 

    #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000;} 

    #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;} 

    .pad1 {display:block; width:18px; height:50px; float:left;} 

    .pad2 {display:block; height:50px;} 

    .pad3 {display:block; height:500px;} 

    #content p {padding:5px;} 

    .bold {font-size:1.2em; font-weight:bold;} 

    .red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;} 

    h2 {margin-left:5px;} 

    h3 {margin-left:5px;} 
</style> 
</head> 
<body> 
<div id="head"> 
    <div class="pad1"></div><h1>Header</h1> 
</div> 
<div id="content"> 
<div class="pad2"></div> 
    <IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME> 
<!--<div class="pad3"></div>--> 
</div> 
<div id="foot">Footer</div> 
</body> 
</html>

이 문제를 해결하기 위해 내가 할 수있는 몇 가지 단서가 있습니까?

이미지보기, Firefox에서 테스트 중입니다. 아래쪽 스크롤이 웹 페이지 전체에 배치되어야하며이 순간 헤더 섹션을 건너 뛸 필요가 있습니다.

alt text

베스트 감사합니다.

출처

2010-12-30 André

문제에 대해 자세히 설명해주세요. 바닥 글을 고정시키고 싶지 않고 맨 끝에 놓고 싶지 않으십니까? –

이 스크롤 막대는 iframe의 스크롤 막대이므로 페이지 전체를 스크롤 할 수 없습니다. – Sotiris

iframe에 height:100%을 설정하고 footer의 Z- 색인을 사용합니다. 따라서 iframe은 전체 높이를 차지하지만 바닥 글 뒤에 있으므로 스크롤바가 올바르게 표시되지 않습니다. HTML 코드에 height="100%"iframe에서 태그를 삭제 한 다음 예를 height:500px;

출처

2010-12-30 10:22:49 Sotiris

나는이 중 하나가 iframe 높이를 고정없이 할 수 있다고 생각하지 않습니다를 들어, CSS 코드 고정 높이의 iframe 선택에 추가 또는 javascript를 사용하여 콘텐츠의 높이를 동적으로 설정합니다. 그렇게 할 수 있다면 덧씌우 기 상단과 하단을 추가 한 다음 고정 된 요소를 맨 위에 배치 할 수 있습니다.

Sotiris가 iframe에 스크롤 막대가 있다고 했으므로 컨테이너에 스크롤 막대가 있어야하지만 iframe에 고정 높이가 없으면 머리글, iframe 및 바닥 글을 안에 넣을 수있는 크기로 컨테이너를 만들 수 없습니다 .

희망이 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Test</title> 
<style type="text/css" media="screen"> 
    body { 
     padding:0px; margin:0px; border:0px; 
     background:#fff; 
     font-size:80%; 
     font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif; 
    } 

    #heading { 
     padding:0px; margin:0px; border:0px; 
     display: block; position: fixed; 
     top: 0px; right: 16px; 
     height: 50px; width: 100%; 
     z-index: 60; 
     background-color: #ddf; 
    } 
    #heading h1 { 
     padding:5px; margin:0px 0px 0px 16px; border:0px; 
    } 

    #container { 
     padding:0px; margin:0px; border:0px; 
     display: block; position: fixed; 
     top: 0px; left: 0px; 
     width: 100%; height: 100%; 
     overflow: auto; 
     z-index: 50; 
    } 

    #footer { 
     padding:0px; margin:0px; border:0px; 
     display: block; position: fixed; 
     bottom: 0px; right: 16px; 
     height: 30px; width: 100%; 
     z-index: 60; 
     background-color: #ddf; 
    } 
    #footer p { 
     padding:5px; margin:0px 0px 0px 16px; border:0px; 
    } 

    iframe { 
     width: 100%; height: 2000px; 
     border: 0px; 
     overflow: hidden; 
     z-index: 30; 
    } 
</style> 
</head> 
<body> 
    <div id="heading"><h1>Title</h1></div> 
    <div id="container"> 
     <div style="height: 50px;">&nbsp;</div> 
     <iframe name="test" src="http://www.yahoo.com"></iframe> 
     <div style="height: 25px;">&nbsp;</div> 
    </div> 
    <div id="footer"><p>Footer</p></div> 
</body> 
</html>

출처

2010-12-30 13:02:06 Yeodave

CSS 레이아웃에서 스크롤 다운 문제를 해결하는 방법

답변

관련 문제