프레임 세트의 순수 CSS 에뮬레이션

나는 1 시간 이상을 찾지 못했습니다. 프레임 셋을 에뮬레이트하는 순수한 CSS 방법이 있습니까? 내 말은, 정말로 그것을 모방하는 것입니다. 상단 및 하단 블록을 고정시킬 흥미로운 부분을 발견했지만 내용의 스크롤 막대는 일반 브라우저 본문 스크롤 막대입니다. 필요한 것은 프레임 세트가하는 것처럼 콘텐츠 블록에 대한 스크롤바뿐입니다.프레임 세트의 순수 CSS 에뮬레이션

콘텐츠 영역 div에 overflow : auto를 할당하고 고정 높이를 설정하면됩니다. 하지만 문제는 자바 스크립트를 사용하지 않고 클라이언트 브라우저 창 크기를 모른다는 것입니다. 그리고 나는 이것을 위해 javascript를 사용하고 싶지 않다. 또한 상단 블록의 높이가 고정되어 있기 때문에 높이에 대한 퍼센트를 사용하지 않습니다. 아래쪽 블록은 브라우저 창 높이에 따라 확장되거나 축소되어야하는 블록입니다. 어떤 도움을 주셔서 감사합니다. 고맙습니다!

출처

2010-08-08 Marcos Buarque

어때?

HTML

<div id="header"> 
    <img src="logo.gif" alt="logo" /> 
    <h1 class="tagline">Oh em gee</h1> 
</div> 
<div id="content"> 
    <div id="content-offset"> 
     <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p> 
    </div> 
</div>

CSS

body, html { 
    margin: 0; padding: 0; 
    height: 100%; 
} 
#header { 
    height: 120px; 
    position: fixed; 
    top: 0; 
    background: red; 
    width: 100%; 
} 

#content { 
    height: 100%; 
    position: absolute; 
    top: 0; 
} 
#content-offset { 
    margin-top: 120px; 
    background: aqua; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    overflow: auto; 
}

출처

2010-08-08 05:06:41 Marko

+1 멋진 솔루션 Marko, 저도 맘에 들어요. – Gabriel

Hummm. 재미있는 소리 ... 나는 그것을 지금 시도 할 것이다 ... 감사합니다! –

내가 어떻게하는지 알려주고, 나는 단지 내 머리 속에서 테스트했다. – Marko

아니요. 상위 블록을 고정 된 크기 (예 : % 1)로 설정하지 않으면 자바 스크립트를 사용하여 창 크기를 가져야한다고 생각합니다. 상단 블록을 10 %, 하단을 90 %로 만듭니다.

출처

2010-08-08 05:01:16

마크로의 답은 가까이 있지만 잘 작동하지 않습니다. 내용이 헤더와 겹칩니다.

여기까지 내용물이 아닌 position: fixed;을 헤더에 사용하고 싶습니다. 또한 래퍼가 불필요하게됩니다. 여기에 기본적인 킥오프 예제가 있습니다. 복사하여 붙여 넣을 수 있습니다.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 3433129</title> 
     <style> 
      body { 
       margin: 0; 
       background: aqua; 
      } 
      #header { 
       position: fixed; 
       height: 120px; 
       width: 100%; 
       background: pink; 
      } 
      #content { 
       padding-top: 120px; /* Should be the same as #header height */ 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header"> 
      <h1>Header</h1> 
     </div> 
     <div id="content"> 
      <p>Start of content.</p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p>End of content.</p> 
     </div> 
    </body> 
</html>

출처

2010-08-08 05:22:12 BalusC

헤더가 겹치지 만 오프셋의 위쪽 여백에주의하십시오. 덧붙여서 패딩은 가로/세로 상단에 추가되므로 #content가 100 % + 120px가됩니다. – Marko

@ Marko : 100 %의 높이는 처음에는 없었을 것입니다 (html/body의 높이가 100 %가 아니기 때문에 효과가 없었을 것입니다).) 나는 대답을 업데이트했다. – BalusC

고마워,하지만 내가 필요한 것은 #content 블록에 대한 스크롤바가 실제로 브라우저 스크롤바라는 점이다. 오버플로 자동으로 #content 블록 내에서만 실행되는 스크롤 막대가 필요합니다. –

프레임 세트의 순수 CSS 에뮬레이션

답변

관련 문제