고정 헤더, 스크롤 가능 바디. 테이블없이 어떻게?

필요한 경우 본문이 스크롤되는 내 웹 사이트에 영구 헤더를 구현하고 싶습니다. Kinda 페이스 북은 예를 들면.고정 헤더, 스크롤 가능 바디. 테이블없이 어떻게?

테이블에 관한 많은 예제를 볼 수 있으므로 테이블없이 할 수있는 방법이 있는지 알고 싶습니다.

2012-01-20 ASPiRE

이 질문은 수천 번 전에 질문되었습니다. 게시하기 전에 조금 연구하십시오. – srijan

중복 된 http://stackoverflow.com/questions/256811/how-do-you-create-non-scrolling-div-at-the-top-of-an-html-page-without-two-sets 나 자신이 포함 된 많은 사람들이 아마도 당신에게 '하지마!'라고 말할 것입니다. – ccpizza

아마도 그런 것 같습니다. 이제는 키워드를 검색하는 것만으로도 내게 일어날 것입니다. "놀랍도록 멋진 검색 엔진 최적화 제목 대신"스크롤 막대 두 세트가없는 HTML 페이지 상단에 비 스크롤 div를 만드는 방법은 무엇입니까? 그것을 발견했다. =) – ASPiRE

는 당신은 헤더의 위치과 같이 고정되도록 설정해야합니다

#header{ 
    position:fixed; 
    top:0; left:0; 
    height:40px; 
    width:100%; 
    z-index:999; 
}

이 헤더는 페이지 상단에 고정 유지하고 당신은 페이지의 몸을 스크롤 할 수 있습니다.

또한 헤더의 높이에 따라 내용을 시작할 때 위에서부터 채우기를 추가 할 수도 있습니다. 이렇게하면 콘텐츠가 처음로드 될 때 콘텐츠가 오버플로 헤더에 의해 보호되지 않습니다.

출처

2012-01-20 21:26:06

+1 마지막 단락 : 정확히 내가 찾고있는 것! 감사! – 11684

테이블이 전혀 필요하지 않습니다. div를 100 % 너비와 임의의 높이로 만든 다음 위치를 지정하여 상단 및 왼쪽을 모두 0으로 고정합니다.

그런 다음 CSS로 다른 콘텐츠를 푸시해야합니다. 헤더 아래에.

출처

2012-01-20 21:27:22 Kristian

그리고 Z- 색인으로 밀어 넣으시겠습니까? – ASPiRE

패딩 윗면을 사용하여 아래로 밀어 넣습니다. z-inex는 헤더가 항상 맨 위에 오도록하기 위해 사용됩니다. 요소의 Z- 색인이 클수록 다른 요소 위에 (동일한 스태킹 순서로) 요소가 나타납니다. –

죄송합니다. 더 명확히해야합니다. 헤더와 동일한 높이의 패딩 뚜껑으로 콘텐츠 div를 푸시 할 수 있습니다. 헤더의 Z- 인덱스는 다른 Z- 인덱스 항목과 겹치지 않는 경우 더 높은 수로 설정할 수 있습니다. – Kristian

고정 헤더, 스크롤 가능 바디. 테이블없이 어떻게?

답변

관련 문제