수다닷컴

녹색 상자 보시면 위 그림은 커지는데 아래 그림은 작아집니다.

첫번째 그림예제는 요소를 포함하고 있는 Content에 높이를 정확히 지정했습니다.

#Content {width:900px; height:500px; background:#eee;margin:auto; position: relative;}두번째 그럼예제는 Content에서 높이 속성(height:500px)을 삭제했습니다.

#Content {width:900px; background:#eee;margin:auto; position: relative;}왜냐면 Content 높이가 페이지 마다 다르게 변해야 되기 때문입니다.

삭제해도 test 박스가 Content를 가득 채워야 되는데요.

문제는 height를 생략하면 test 박스의 녹색선 높이가 줄어들어 버립니다.

몇 일을 고민하고 있는데요.. 혹시 경험있으신 분의 조언 부탁드려요. (__)전체소스--------------------------------------------------------------------------------------------------

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en
head
meta http-equiv=Content-Type content=text/html; charset=utf-8/
titletest_layout/title

style type=text/css
#Content {width:900px; height:100%; background:#eee;margin:auto; position: relative;}
.line_solid_green {border:3px solid green; height:100%;width:100px;color:red; float:right; }

/style
/head
body

div id=Content

div class=line_solid_green
test
/div
p
안녕하세요br
안녕하세요br
안녕하세요br
안녕하세요br
안녕하세요br

/p

/div
/body
/html

-----------------------------------------------------------

답변글,코멘트글 남겨주신 모든 분들께 감사드립니다. (_ _)

float:left; min-height:100%; 2 가지 속성을 이용해서 해결했습니다.
원본 소스를 그대로 보여드리기엔 이미 코딩량이 방대해서
문제점이라고 파악되는 핵심만 뽑아 테스트 후 질문 올린 건데요.

실제 원본소스와 비교해서 다른요소와의 관계가 얽혀있어 그런지
말씀해주신소스가 올바르게 반영되지
못한 것 같습니다.

관심가져주시고 도움 주신 분들께 다시 한 번 감사드립니다.[해결내용정리]

contaner 안에 다시 감싸는 요소를 만들고 다시 아래 속성을 주면 그 안에 포함된 요소의 높이100%는
유동적으로 꽉 차게 됩니다.
#Container_innser { float:left; min-height:100%; width:100%; border:2px solid green ; position:relative;}
.side_line_100per{ border-right:2px solid yellow; height:100%;}

div id=Container
div id=Container_innser
div class=side_line_100per/div!-- 선모양 요소로 높이를 100%로 주면 Contaner 만큼 높이가 늘어납니다.--
/div
/div

신청하기