float 때문에 height 가 자동으로 늘어나지 않네요 정보
float 때문에 height 가 자동으로 늘어나지 않네요
본문
http://jquery.shunter.kr/test/test23.php
여기 보시면요.
네이버 모바일 상단 메뉴인데요.
이것좀 튜닝해서 써볼까 하는데 마음에 안드는 부분이 있네요.
일단, 메뉴명이 생각보다 길어지면 하단에 내려오게끔 하게 튜닝은 했고요;
하단에 내려왔을때 백그라운드 칼라가 다 먹어야 하는데요 (빨간색 테투리 영역)
이 부분이 height:33px 로 고정되어 있고 하위의 style 에 float 가 있어서 높이 조절이 전혀 안되네요.
혹시 편법이라도 제가 하려고 하는걸 어떤식으로 할 수 있을까요?
답변 주시면 정말 감사하겠습니다.
참고로
http://m.news.naver.com/list.nhn?mode=LS2D&sid1=107&sid2=216
여기 보시면요.
네이버 모바일 상단 메뉴인데요.
이것좀 튜닝해서 써볼까 하는데 마음에 안드는 부분이 있네요.
일단, 메뉴명이 생각보다 길어지면 하단에 내려오게끔 하게 튜닝은 했고요;
하단에 내려왔을때 백그라운드 칼라가 다 먹어야 하는데요 (빨간색 테투리 영역)
이 부분이 height:33px 로 고정되어 있고 하위의 style 에 float 가 있어서 높이 조절이 전혀 안되네요.
혹시 편법이라도 제가 하려고 하는걸 어떤식으로 할 수 있을까요?
답변 주시면 정말 감사하겠습니다.
참고로
http://m.news.naver.com/list.nhn?mode=LS2D&sid1=107&sid2=216
댓글 전체
잘 이해가 안되네요 ㅡ,.ㅡ
높이가 고정되어 있으니 높이 조절이 자동으로 안되는건 당연한거 아닌가요?;;
그리고 고정되어 있지 않더라도 자식 태그에 float속성을 주었을때, 자식태그가 끝난 후 clear
해주시 않으면 부모태그는 자식태그를 인식하지 못합니다. 다시 말하면 자식태그가 부모태그의
영역을 벗어나 버리게 되죠..
<!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">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parent {
border: 1px solid red;
}
.child {
list-style: none;
width: 200px;
height: 50px;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<div class="parent">
부모태그 안쪽.
<ul>
<li class="child">자식</li>
<li class="child">자식</li>
<li class="child">자식</li>
<li class="child">자식</li>
<li class="child">자식</li>
</ul>
<div style="clear: both; height:0"><!-- 클리어 해주면 부모창에 있어요!! --></div>
</div>
</body>
</html>
높이가 고정되어 있으니 높이 조절이 자동으로 안되는건 당연한거 아닌가요?;;
그리고 고정되어 있지 않더라도 자식 태그에 float속성을 주었을때, 자식태그가 끝난 후 clear
해주시 않으면 부모태그는 자식태그를 인식하지 못합니다. 다시 말하면 자식태그가 부모태그의
영역을 벗어나 버리게 되죠..
<!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">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parent {
border: 1px solid red;
}
.child {
list-style: none;
width: 200px;
height: 50px;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<div class="parent">
부모태그 안쪽.
<ul>
<li class="child">자식</li>
<li class="child">자식</li>
<li class="child">자식</li>
<li class="child">자식</li>
<li class="child">자식</li>
</ul>
<div style="clear: both; height:0"><!-- 클리어 해주면 부모창에 있어요!! --></div>
</div>
</body>
</html>
흠.... 머지... 사이트가봐도 무슨현상인지는 잘 못찾겟네요.
전 앱솔루트 포지셔닝으로 몇개 위치잡다가
컨텐츠div를 float 하면 wrap div가 자동조절이되서 그렇게했던거같은데 ㅡㅡ;;
일단 <!DOCTYPE html> 이걸 선언하시고 코딩하시는거면..
가변적인 높이속성을 잡을때,
min-height:100px; _height:100px;
이렇게 잡아주셔야합니다.. 익스플로러6 에서는 height 속성이 자동적으로 늘어나는데
(문서타입설정한) 익스7 이상과 다른브라우져에서는 그냥 height 는 무조건 고정이기 때문이죠.
그래서 min-height:최소높이px; max-height:최대높이px; 이런 속성을 잘활용해야합니다. _ 이렇게 익스6 핵도 처리하고요.
전 앱솔루트 포지셔닝으로 몇개 위치잡다가
컨텐츠div를 float 하면 wrap div가 자동조절이되서 그렇게했던거같은데 ㅡㅡ;;
일단 <!DOCTYPE html> 이걸 선언하시고 코딩하시는거면..
가변적인 높이속성을 잡을때,
min-height:100px; _height:100px;
이렇게 잡아주셔야합니다.. 익스플로러6 에서는 height 속성이 자동적으로 늘어나는데
(문서타입설정한) 익스7 이상과 다른브라우져에서는 그냥 height 는 무조건 고정이기 때문이죠.
그래서 min-height:최소높이px; max-height:최대높이px; 이런 속성을 잘활용해야합니다. _ 이렇게 익스6 핵도 처리하고요.
