수다닷컴

  • 해외여행
    • 괌
    • 태국
    • 유럽
    • 일본
    • 필리핀
    • 미국
    • 중국
    • 기타여행
    • 싱가폴
  • 건강
    • 다이어트
    • 당뇨
    • 헬스
    • 건강음식
    • 건강기타
  • 컴퓨터
    • 프로그램 개발일반
    • C언어
    • 비주얼베이직
  • 결혼생활
    • 출산/육아
    • 결혼준비
    • 엄마이야기방
  • 일상생활
    • 면접
    • 취업
    • 진로선택
  • 교육
    • 교육일반
    • 아이교육
    • 토익
    • 해외연수
    • 영어
  • 취미생활
    • 음악
    • 자전거
    • 수영
    • 바이크
    • 축구
  • 기타
    • 강아지
    • 제주도여행
    • 국내여행
    • 기타일상
    • 애플
    • 휴대폰관련
  • 프로그램 개발일반
  • C언어
  • 비주얼베이직

부모 div 높이와 자식 div 높이가 각 100%일때, 자식 div의 보더와 패딩값만큼 넘침 현상.

예님

2023.04.01

그림과 같은 레이아웃을 작성중입니다.

top - left menu - content - bottom 으로 구성되어있구요.(bottom은 흰색으로 되어있어서 잘 보이지 않네요;)

브라우져의 창크기에 맞춰... left menu는 높이 값이 가변, content는 높이가 폭이 모두 가변으로 작성을 할려고 합니다.

다음과 소스로 정렬을 하는데까지는 성공을 했으나...
===============================================================================================================
body
div class=wrap
div class=toptop/div
div class=middle
div class=left_menu
div class=border_boxleft_menu/div
/div
div class=content_wrap
div class=content
div class=border_boxcontent/div
/div
/div
/div
div class=bottombottom/div

/div
/body
====================================================================================================================
html, body { width:100%; height:100%; }
body,
input,
textarea,
select,
button,
table { margin : 0; font-size:12pt; }

/* Page Layout */

.wrap { width:100%; height:100%; margin:0; }

.top { width:100%; height:80px; background:url(../images/top_back.jpg) repeat-x; }

.middle { width:100%; height:100%; background:black; *zoom:1; }

.middle:after { content:; display:block; clear:both; }

.left_menu,
.content { height:100%; background:#313131; padding:15px 3px;}

.left_menu { width:208px; float:left;}

.content_wrap { width:100%; height:100%; float:right; *zoom:1; margin-left:-224px; }

.content_wrap:after { content:; display:block; clear:both; }

.content { height:100%; margin-left:224px; }

.border_box { height:100%; background:url(../images/box_back.jpg) repeat-x top white;}

.content .border_box { }

.bottom { width:100%; height:80px; background:white; float:left; }============================================================================================================그림과 같이

html부터 body, 부모div 자식div 모두 높이 값이 100%로 되었다보니...

자식 div의 보더값과 패딩값만큼... 자식 div가 부모div의 바깥으로 밀려납니다.

이 현상을 해결할 수 있는 묘안이 있을까요? ㅠ

방법을 찾지 못하면 table로 페이지를 구성해야되는데... 뭔가 자존심이 상하네요 ㅠㅠㅠㅠㅠㅠㅠㅠ

신청하기





COMMENT

댓글을 입력해주세요. 비속어와 욕설은 삼가해주세요.

  • 곰탱이

    지금 보니 제가 질문을 좀 성의 없이 올렸군요 ^ -^;;;

    보드가 들어간 소스를 올렸어야는데.. 빼먹고... 기준점도 모호한;;;

    어제 퇴근식나에 급하게 질문을 올려서 이 모양이네요;.




    완전히 해결은 못했지만...

    두분 답변이 도움이 되었습니다.



    한번더 질문을 올리겠습니다~

    감사합니다 ^ -^

  • 모드니

    height:100% 의 기준점이 어느 박스인가요? 게다가 위 소스엔 border 속성이 없는뎁쇼? width의 경우엔 width:100%를 선언하지 않고 padding, border 등을 선언하면 그냥 적용이 되요(block요소에 float나 position이 없을경우에) height의 경우 이런 레이아웃의 경우엔 크게 필요해 보이진 않는군요.. 좌우 박스의 높이를 맞추어야 한담녀 자바스크립트를 이용한 방법 또는 감싼 박스와 안쪽 박스 중 큰 놈에게

  • 곰돌이

    height:100%인 상태에서 상하로 패딩을 넣으면 100%가 초과하기 때문에 틀어짐이 발생합니다.
    이 점은 참고하세요.

번호 제 목 글쓴이 날짜
2701856 다시 한번 대체텍스트 관련 질문입니다.. (1) 한샘가온 2025-07-18
2701803 저에게 지식의 자비를~ 베푸소서~!! (4) 봄바람 2025-07-17
2701773 메모장 파일을 읽고 출력하는 내용에 관한 질문입니다. 한국드립 2025-07-17
2701748 아이피 변경 부분이요... 날애 2025-07-17
2701665 자바스크립트 // 왜 if 두개를 쓰면 오류가 나죠? (2) 글리슨 2025-07-16
2701636 모바일웹 게시판 만들기 조언좀 부탁드려요 ㅜㅜ (2) 정훈 2025-07-16
2701610 [질문] AS3 액션으로 스테이지 사이즈를 조절할 수 있는 방법이 있을까요? (1) 앵겨쪼 2025-07-15
2701556 input text에 한글을 default 하려면.. (3) 히나 2025-07-15
2701528 apmsetup 접속이.... (5) 곰돌이 2025-07-15
2701506 암호를 *로 (6) 도도한 2025-07-14
2701475 배열최대값 찾기인데; 소스좀 해석해주세요; Orange 2025-07-14
2701397 세로 100% 푸터부분이 바닥에 안붙어요(세로 100% 되는 소스를 썼거든요) 꽃겨울 2025-07-13
2701369 [긴급]로드해온 swf가 갑자기 사라지는 현상..(익스10) (2) 곰돌이 2025-07-13
2701340 [c++]학교 과제 질문이요...... (3) 기쁨해 2025-07-13
2701311 구글 뉴스검색최적화 작업은 누구의 영역인가요? 많은 조언 부탁드려요! 리나 2025-07-13
2701285 아이폰이나 안드로이드 폰 인터넷으로 볼때 배꽃 2025-07-12
2701230 테마 설정하면 밑에 뜨는 글 삭제 (1) 창의적 2025-07-12
2701177 css적용이 안되요~ (6) 다니엘 2025-07-11
2701151 사이트작업시 inputbox 가 readonly 형태표시 어떻게 하시나요? (1) 찬내 2025-07-11
2701123 간단한 select 질문입니다 (3) 천사의눈물 2025-07-11
<<  이전  1 2 3 4 5 6 7 8 9 10  다음  >>

수다닷컴 | 여러분과 함께하는 수다토크 커뮤니티 수다닷컴에 오신것을 환영합니다.
사업자등록번호 : 117-07-92748 상호 : 진달래여행사 대표자 : 명현재 서울시 강서구 방화동 890번지 푸르지오 107동 306호
copyright 2011 게시글 삭제 및 기타 문의 : clairacademy@naver.com