고정된 높이값과 내용 길이에 따른 div변화 및 브라우져 호환
겨울
style type=text/css
html, body {height:100%; font-size:12px;}
#wrap{width:500px; background-color:#000000; }
#div1{ width:400px; height:200px; background-color:#ffff66; }
#div1 .txt{ width:300px; background-color:#ff6600;}
#footer{width:400px; height:100px; background-color:#cccccc;}
/style
/head
body
div id=wrap
div id=div1
p /p
div class=txt
p /p
p /p
p /p
p /p
p /p
p /p
p내용이 길때/p
p내용이 길때/p
p내용이 길때/p
p내용이 길때/p
p내용이 길때/p
p내용이 길때/p
p내용이 길때/p
p내용이 길때/p
/div
/div
div id=footer
하단
/div
/div
/body1. 노랑색 높이는 고정
2. 회색 영역은 주황색의 내용 길이에 따라 아래로 붙어야 함.
일반적인 홈페이지의 footer 영역 처리에서 발생하는 현상입니다.
내용이 짧은 페이지는 footer가 위로 확 달라붙어서요
안에 높이를 지정하면 길어지는 내용은 footer를 뚫고 지나가고 ㅠㅠ
도와주세요~~ 브라우져 6, 7, 8 에서 호환 될수 있는 코딩이 멀까요 ㅠㅠ
div 위치값은아무것도안 넣은 상태입니다. 뭘 해도 안되더라고요 ^^
고수님들 부탁드려요!!!!
-
족장
앗^^ 감사합니다. 바로 되네요~
여러가지 속성들은 공부해야하는데~ 있는걸로 용쓰다보니 답이 안나왔어요 ㅎㅎㅎ
감사합니다. ㅠㅠ -
도도한
height 대신에 min-height를 사용하면 됩니다. IE6은 지원하지 않습니다. 본문 영역에 여백이 없다고 내용을 읽을 수 없지는 않기 때문에 IE6은 그냥 둬도 괜찮은 상황같은데요.