가변화면 오른쪽에 세로 100% 영역을 배치하고 싶습니다....
찬늘봄
위와 같이 가로 고정값 세로 100% 영역을 오른쪽에 배치하고 싶습니다.
(오른쪽 영역 좌측에 세로 100% 라인을 그어야 하는데요....)
화면은 해상도에 따라 가변이어서 좌측 컨텐츠 가로값은 100%이구요.
하코사사이트 글참고해서 레이아웃을 잡고 잘 되어가는가 싶었는데
컨텐츠가 브라우저보다 길어져 스크롤이 생기는 경우
오른쪽 영역 하단이 잘려 나오네요.
이걸 해결 할 방법 없을까요?
ㅠㅠ!doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd
html
head
title/title
style type=text/css
* { margin:0; padding:0; border:0; }
html, body { width:100%; height:100%; font-size:100%; }
#wrapper { width:100%; min-height:100%; text-align:center; }
* html #wrapper { height:100%; }
#right { background:#fcc; min-height:100%; float :right; width:200px; border-left:1px solid #000;}
* html #right { height:100%; }
#content { background:#e0ffe0; }
/style
/head
body
div id=right
/div
div id=wrapper
div id=content
qbrqbrqbrqbrqbrqbrqbrqbrqbrqbr
qbrqbrqbrqbrqbrqbrqbrqbrqbrqbr
qbrqbrqbrqbrqbrqbrqbrqbrqbrqbr
qbrqbrqbrqbrqbrqbrqbrqbrqbrqbr
qbrqbrqbrqbrqbrqbrqbrqbrqbrqbr
/div
/div
/body
/html
-
한무릎
레이아웃의 구현 방법은 딱 하나만 있는 것은 아닙니다.
CSS에서 계산하는 높이 100%의 경우 그 기준이 컨텐츠 영역 전체가 아니라 브라우징 화면이기 때문에 지금과 같은 현상이 생기는 거구요, 스크롤 내리면 나오는 q 의 경우 자연스럽게 #right 영역이 차지하고 있던 영역이 끝나 브라우저 폭의 전체를 쓰게 돼 위에 있던 q들과 어긋나게 되는 겁니다.
히스이님은 다른 몇가지 구현 방법 중에 하나를 고려해 보시라고 말씀하신 것 같구요 ^^
#right -
빛솔
min-height:100%를 빼니 아예 우측영역이 나오질 않는데요....ㅠㅠ
-
보단
#right에서 min-height빼주시고 background-repeat:repeat-y;해주시면 될듯합니다
번호 | 제 목 | 글쓴이 | 날짜 |
---|---|---|---|
2696504 | 플래시 위에 div 올리기 (5) | 큰꽃늘 | 2025-05-30 |
2696458 | 제가 만든 소스 한번 봐주시고 수정 할 꺼 있으면 말해주세요. (실행은 되지만 깜빡거리네요) | 이플 | 2025-05-29 |
2696434 | 퍼센트 레이아웃 질문인데요.. | 나츠 | 2025-05-29 |
2696372 | %=open_main%, %=open_sub% 가 뭘까요? (9) | 행복녀 | 2025-05-29 |
2696347 | 콘솔 프로그램 질문 | 상큼한캔디 | 2025-05-28 |
2696320 | c언어 scanf 함수를 이요해 문자열 입력 받을 시 질문 있습니다. | 슬아라 | 2025-05-28 |
2696292 | 익스플로러9이상에서만 이상한 보더가 보이는데 삭제할수 있나요? | 망고 | 2025-05-28 |
2696263 | 프로그래밍 공부시작 질문 (6) | 진이 | 2025-05-28 |
2696206 | SK2의 플래시를 밴치마킹하려고하는데요.. (1) | 비내리던날 | 2025-05-27 |
2696179 | ie7에서 사라지지가 않네요. (2) | 빛길 | 2025-05-27 |
2696150 | div에 스크롤 생기게 하려면... (2) | 에드가 | 2025-05-27 |
2696123 | 자료구조론 공부중인데 | 김자영 | 2025-05-26 |
2696094 | exe 파일 | 제철 | 2025-05-26 |
2696043 | 제이쿼리 .scroll() 관련 질문드립니다 | 이거이름임 | 2025-05-26 |
2695984 | 마크업상으로 하단에 있으나 우선적으로 이미지파일을 다운로드받는 방법 (1) | 들꿈 | 2025-05-25 |
2695934 | tr 속성값 (9) | 새 | 2025-05-25 |
2695905 | ASP로 개발됐을 때 css가 달라져요 ㅠㅠ (4) | 슬아라 | 2025-05-24 |
2695878 | form을 이용한 다른 페이지로 넘기는 방법을 알려주세요 (1) | 핫파랑 | 2025-05-24 |
2695844 | 저기 암호화 및 복호화 프로그램.. 만들어볼려는대 (2) | 한빛 | 2025-05-24 |
2695814 | [질문] PDA에서 애플릿이 가능한가요? (1) | 봄시내 | 2025-05-24 |