1. 홈
  2. 질의 응답
  3. 상단과 겹치지 않는 고정 된 톱 바를 수행하는 가장 좋은 방법은 무엇입니까?

상단과 겹치지 않는 고정 된 톱 바를 수행하는 가장 좋은 방법은 무엇입니까?

2009-03-11 2 views

답변

2

막대가 position: fixed 인 경우 중첩되는 내용을 방지하는 한 가지 방법은 고정 높이를 설정 한 다음 주 컨테이너의 상단 여백을 동일한 높이로 설정하는 것입니다.

미리 고정 된 div의 높이를 모르는 경우 JS를 사용하여 높이를 확인하고 그에 따라 컨테이너 여백을 설정해야합니다.

출처

2009-03-11 04:44:50

+0

그래서 CSS를 올바르게 처리 할 방법이 없습니까? 나는 막대의 높이를 알고 있지만 그것이 나타나는지 여부를 모르겠다. CSS로 검사 할 방법이없는가? 난 그냥 CSS를 선택기의 엉덩이지만 창조적 인 사용에서 촬영이야? 누군가? –

0

그냥 CSS로 할 수 있어야합니다.

다음은 CSS 디자인의 "성배"를 만드는 방법에 대한 훌륭한 기사입니다.

3 개의 열이있는 페이지. 메뉴의 고정 너비 왼쪽 사이드 바, 광고 또는 사진의 오른쪽 사이드 바 및 콘텐츠와 함께 흐르는 확장 가능 센터

참조 :

성배의 검색에서

: CSS

출처

2009-03-11 05:19:56 Konrad

8

당신은 고정 된 헤더를 만들려면이 같은 뭔가를 할 수 :

<style> 
body { margin: 0; } 
div.header { position: fixed; height: 50px; width: 100%; } 
div.content { padding-top: 50px; } 
</style> 

<body> 
<div class="header">header</div> 
<div class="content">content</div> 
</body>

은 아마 IE5.5 체크 아웃을/ie6.0 여기서 수정 : http://www.howtocreate.co.uk/fixedPosition.html

출처

2009-06-19 18:58:23 Michiel

+1

대신 고정 바닥 글을 만드는 방법은 무엇입니까? – jondinham

4

ben_h의 응답에서 OP의 질문에 Michiel의 코드를 적용합니다.

<style type="text/css"> 
body { margin: 0; } 
div.header { position: fixed; height: 50px; width: 100%; } 
div.content{ /* normal stuff here */ } 

/*** Only selects div.content immediately preceded by div.header. 
If div.header doesn't appear, it won't select. ***/ 
div.header + div.content { padding-top: 50px; } 
</style> 

<body> 
<div class="header">header</div> 
<div class="content">content</div> 
</body>

난 당신에게 IE6가 너무 좋아 될 수 없습니다 그 팔자 '경고 하겠지만, 딘 에드워즈의 IE7.js는 형제 선택 (+)에 대한 지원을 추가합니다.

출처

2009-06-19 19:06:33 ajm

관련 문제

 관련 문제