div 유동적 높이 조절
나츠
안녕하세요 ...검색을 해도 찾지 못해 질문을 드립니다.크게 2개의 그룹메뉴이 있습니다. 각 메뉴 그룹에서 해당 메뉴를 클릭하면 다시 세부 항목 목록이 나오는 구조로 되어 있습니다.( 아래 참조 ) 각 메뉴 항목마다 갯수에 따라서 각Group의 높이를 유동적으로 지정하고 싶은데요 ..생각처럼 되지 않네요 ...
[ Group 1[Menu1] [Menu2] [Menu3] [Menu4] [Menu5] Menu1 을 클릭하면 다시 세부 목록이 나옵니다. - 항목1 - 항목2 - 항목3][ Group 2[Menu1] [Menu2] [Menu3] [Menu4] [Menu5] Menu1 을 클릭하면 다시 세부 목록이 나옵니다. - 항목1 - 항목2 - 항목3]
code------------------------------------------------------------------------------------------------.tabGroup {width:790px; height:240px; background:url(/images/portal/tabGroup_bg.gif) repeat-x; overflow:hidden;}.tabGroup li {float:left; width:150px; height:33px; text-align:center; background:url(/images/portal/tabBg.gif) no-repeat;color:#000000; }.tabGroup li p {cursor: pointer; }.tabGroup ul li div {clear:both; text-align:left; padding-bottom:15px; position:absolute; width:790px; z-index:10; background:url(/images/portal/tabList_bg.gif) no-repeat; background-position:left bottom;}.tabGroup ul li div ul{float:left; padding-left:15px; width:377px; margin-top:15px;font-weight:normal; font-size:12px; font-family:Gulim}.tabGroup ul li div ul.group1 {border-right:dashed 1px #bfbdbd}.tabGroup ul li div ul li {float:left; width:178px; height:18px; background:url(/images/portal/bullet_gray.gif) no-repeat; background-position:0px 4px; padding-left:10px; text-align:left}.tabGroup ul li div ul li img {vertical-align:text-bottom}.tabGroup ul li div ul .grouptitle {height:24px; }
------------------------------------------------------------------------------------------------div class=tabGroup ul li id=tab01p id=tabP1 class=pt12 onclick=viewMenu(1);menu1/p div id=tabList01 !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p %= menu12% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p %= menu11% /ul
/div /li li id=tab04p id=tabP4 class=pt12 onclick=viewMenu(4);menu2/p div id=tabList04 !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p %= menu42% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p %= menu41% /ul /div /li li id=tab02p id=tabP2 class=pt12 onclick=viewMenu(2);menu3/p div id=tabList02 style=display: none; position: absolute; !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p %= menu22% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p %= menu21% /ul /div /li li id=tab03p id=tabP3 class=pt12 onclick=viewMenu(3);menu4/p div id=tabList03 !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p &nbssp; %= menu32% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p %= menu31% /ul /div /li li id=tab05p id=tabP5 class=pt12 onclick=viewMenu(5);menu5/p div id=tabList05 !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p %= menu52% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p %= menu51% /ul /div /li /ul/div!-- tabGroup1:End --
!-- tabGroup2:Start --div class=tabGroup ul li id=tab06p id=tabP6 class=pt12 onclick=viewMenu(6);menu6/p div id=tabList06 !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p %= menu62% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p %= menu61% /ul /div /li li id=tab09p id=tabP9 class=pt12 onclick=viewMenu(9);menu7/p div id=tabList09 !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p %= menu92% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p %= menu91% /ul /div /li li id=tab07p id=tabP7 class=pt12 onclick=viewMenu(7);menu8/p div id=tabList07 !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p %= menu72% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p %= menu71% /ul /div /li li id=tab10p id=tabP10 class=pt12 onclick=viewMenu(10);menu9/p div id=tabList10 !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p %= menu102% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p; %= menu101% /ul /div /li li id=tab08p id=tabP8 class=pt12 onclick=viewMenu(8);menu10/p div id=tabList08 !-- 신청목록:Start -- ul class=group1 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group1.gif height=11 alt=신청/p %= menu82% /ul !-- 조회목록:Start -- ul class=group2 p class=grouptitleimg src=%=Globals.IMG_DIR%portal/group2.gif height=11 alt=조회/p %= menu81% /ul /div /li /ul/div
-
드리
기본적으로 ul태그안에 li도 안오고 p태그가 오고 별 필요 없어보이는 float:left도 있고 처음부터 구조적으로도 잘못되있네요. 모 그냥 보이면 장땡이라면 할말없지만 태그 수정부터 하심이 좋을듯
-
파라
답변 고맙습니다. 미지정 또는 auto 로 하면 아래 Group2 가 Group1 과 겹쳐져서 Group1 메뉴 부분만 보닙니다.
-
혁민
height:미지정 또는 auto;