Div 레이아웃..도와주세요 정보
Div 레이아웃..도와주세요
본문
위에보시면 #snb와 #content 가 #container에 종속되어 있는 구조인데요
#snb가 #contents에 길이에 따라서 자동적으로 높이가 변형되었으면 좋겠거든요
또는 역으로 #contents가 #snb에 따라서 늘어 날수도 있구요
감사합니다.
댓글 전체
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body { font: 12px arial, 돋움; color: #222; }
#wrap { width: 900px; }
#head { height: 150px; background: #333; }
#container { width: 900px; overflow: hidden; }
.snb { width: 200px; float: left; background: #9C0; }
.content { width: 690px; background: #EEE; float: right; overflow: hidden; }
#foot { width: 900px; background: #CCC; }
-->
</style>
</head>
<body>
<!-- 레이아웃 //-->
<div id="wrap>
<div id="head">
헤드/ 로고 및 메인네비게이션
</div>
<div id="container">
<div class="snb">
서브 네비게이션 & 서브 컨텐츠
</div>
<div class="content"> <!-- 게시판 분할시 헤드 영역은 여기까지 입니다. //-->
메인 컨텐츠 내용
</div> <!-- 게시판 분할시 풋터 영역은 여기서부터 입니다 //-->
</div>
<div id="foot">
Copyright ⓒ All rights reserved.
</div>
</div>
</body>
</html>
이렇게 설정해주시면됩니다.
다른 궁금사항 있으시면
http://www.websp.co.kr
방문해주셔서 글남겨주세요~ ^^ 도움이된다면 도와드릴께요~
<head>
<title>Layout</title>
<style type="text/css">
<!--
body { font: 12px arial, 돋움; color: #222; }
#wrap { width: 900px; }
#head { height: 150px; background: #333; }
#container { width: 900px; overflow: hidden; }
.snb { width: 200px; float: left; background: #9C0; }
.content { width: 690px; background: #EEE; float: right; overflow: hidden; }
#foot { width: 900px; background: #CCC; }
-->
</style>
</head>
<body>
<!-- 레이아웃 //-->
<div id="wrap>
<div id="head">
헤드/ 로고 및 메인네비게이션
</div>
<div id="container">
<div class="snb">
서브 네비게이션 & 서브 컨텐츠
</div>
<div class="content"> <!-- 게시판 분할시 헤드 영역은 여기까지 입니다. //-->
메인 컨텐츠 내용
</div> <!-- 게시판 분할시 풋터 영역은 여기서부터 입니다 //-->
</div>
<div id="foot">
Copyright ⓒ All rights reserved.
</div>
</div>
</body>
</html>
이렇게 설정해주시면됩니다.
다른 궁금사항 있으시면
http://www.websp.co.kr
방문해주셔서 글남겨주세요~ ^^ 도움이된다면 도와드릴께요~
네 이미 구성은 이렇게 되어져있는데
자동으로 늘리는 방법이 있을까해서요
자동으로 늘리는 방법이 있을까해서요
어떠한것을 하시려고 그러는건지 알고싶은데요!!
혹시 왼쪽 컨텐츠 높이에 맞추어서 라인이 생성되어야하는건가요?
왼쪽 컨텐츠 와 메인 컨텐츠 분리
라인 생성을 위한것이 아니라면 궂이 저러한 구조가 필요없을듯...
혹시 왼쪽 컨텐츠 높이에 맞추어서 라인이 생성되어야하는건가요?
왼쪽 컨텐츠 와 메인 컨텐츠 분리
라인 생성을 위한것이 아니라면 궂이 저러한 구조가 필요없을듯...
넵!!
라인 생성하는건데...힘드네욤
라인 생성하는건데...힘드네욤
http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
여기보시면 네가지 방법이 있네요
아니면
http://chikuyonok.ru/playground/cols/
혹은
http://www.satzansatz.de/cssd/companions.html
링크 참조해 보시면 될듯합니다.
여기보시면 네가지 방법이 있네요
아니면
http://chikuyonok.ru/playground/cols/
혹은
http://www.satzansatz.de/cssd/companions.html
링크 참조해 보시면 될듯합니다.
라인 생성을 위한 것이라면 CSS 보더를 주어 사용하는것은 힘들고요
백그라운드 이미지를 Container에 백그라운드 이미지를 사용하여 설정하면 되요!
그렇게되면 위와 같은 코딩이 있을때 메인컨텐츠가 중점적으로 커지거나 왼쪽 메뉴가 커지게 됐을시
container 내에 위치한것이므로 백그라운드는 왼쪽이든 메인이든 상관없이 늘어나게 되는것이죠
참조가 되셨을지 모르겟네요 ^^
다른 내용이 필요하시면 제 홈페이지 방문도 많이 하시고 질문 남겨주세요 ^^
백그라운드 이미지를 Container에 백그라운드 이미지를 사용하여 설정하면 되요!
그렇게되면 위와 같은 코딩이 있을때 메인컨텐츠가 중점적으로 커지거나 왼쪽 메뉴가 커지게 됐을시
container 내에 위치한것이므로 백그라운드는 왼쪽이든 메인이든 상관없이 늘어나게 되는것이죠
참조가 되셨을지 모르겟네요 ^^
다른 내용이 필요하시면 제 홈페이지 방문도 많이 하시고 질문 남겨주세요 ^^
자문자답
Jquery로 어떻게 해결했네욤;
감사합니다.
/* Container에 종속된 snb와 Content의 크기를 같게한다 */
$(document).ready(function(){
var h_content = $("#content").height();
var h_snb = $("#snb").height();
if (h_snb < h_content){
$("#snb").height(h_content);
} else {
$("#content").height(h_snb);
}
});
Jquery로 어떻게 해결했네욤;
감사합니다.
/* Container에 종속된 snb와 Content의 크기를 같게한다 */
$(document).ready(function(){
var h_content = $("#content").height();
var h_snb = $("#snb").height();
if (h_snb < h_content){
$("#snb").height(h_content);
} else {
$("#content").height(h_snb);
}
});
