css float 자동 높이 조절이요..
글쓴이: nomail / 작성시간: 금, 2010/10/22 - 11:33오전
안녕하세요.
CSS 작업중에 막히는 부분이 있어 질문드립니다.
위의 레이아웃 상태에서 파란박스안에 컨텐츠가 많아서 높이가 커지면
빨간박스도 자동으로 높이를 늘릴려고 하는데요.
빨간박스의 div 셀렉터에 어떤 속성을 넣어야 할까요?
아니면 레이아웃을 새로 만들야 하는건지요?
잘 아시는 분 답글 좀 부탁드리겠습니다..
Forums:
정상적인 방법으로는
정상적인 방법으로는 안되고, 트릭을 써야합니다.
예를 들어 배경만 늘릴려고 하는 경우, 세로로 굉장히 큰 이미지를 넣는 방법이 있습니다.
어흑..ㅜㅜ 그럼
어흑..ㅜㅜ
그럼 편법밖에 방법이 없는건가요?
구글신께 희망을 걸거봐야 겠습니다.. ㅜㅜ
안될것까진없고..
일단 둘다 float 라는 것은 두 div가 서로 관련성이 없도록 하겠다는건데,
높이가 관련있어야 한다면 애초에 float 구조가 아닌겁니다.
일단 좌측 div는 내용과 무관하게
우측 div 높이를 기준으로 최대의 길이를 유지하므로
좌측의 div는 height: 100% 같은 속성으로 해결하면 될 것 같고,
우측 div는 float 없이 우측에 위치하기 위해 margin-left 을 사용하면 되겠네요.
일단 아래처럼 테스트해보니 파이어폭스에서는 잘 작동하는군요.
<html> <head> <style> #wrap { position: relative; width: 400px; } #left { background-color: #d77; position: absolute; width: 200px; height: 100%; } #right { background-color: #7dd; margin-left: 200px; width: 200px; } </style> </head> <body> <div id="wrap"> <div id="left"> <!-- left column --> </div> <div id="right"> <br><br><br><br> <br><br><br><br> </div> </div> </body> </html>우아~~ 친절한 답글
우아~~ 친절한 답글 감사드립니다.
안그래도 해결못하고 미뤄두고 있었는데 amorette님 덕분에 뻥뻥 해소가 되었습니다~~~
사실 위 그림은 간략하게 그린 것이고 실제로는 더 복잡한 레이아웃입니다만 간격만 맞추면 잘 될것 같습니다.
악의 축 IE에서는 여전히 삽질이 필요하군요. right박스에서 top마진이 안 먹습니다.. -_- 요건 편법으로 해결~
도움주셔서 정말 고맙습니다~~
님은 최곱니다
저도 이걸로 고민했었는데 정말 감사합니다 ^^ 좌측은 float로 해결하고 height를 100%, 우측은 float를 쓰지말고 margin-left를 주면 되군요~~ㅎㅎ
님은 최곱니다
저도 이걸로 고민했었는데 정말 감사합니다 ^^ 좌측은 float로 해결하고 height를 100%, 우측은 float를 쓰지말고 margin-left를 주면 되군요~~ㅎㅎ
display:table
감싸고 있는 늘어나야할 배경이 있는 부분에 css속성 변경...
display:table
와 정말 감사합니다.
한방에 해결되는 이런게 있었군요!!!! 정말 감사합니다. :)
댓글 달기