제목이 너무 설명하기 쉽지 않다면 죄송합니다.하지만 삽입하는 방법을 알지 못했습니다. 문제는 :CSS의 반 동적 인 콘텐츠 배경
1 및 2만을 배경 그래픽을 포함하는 div가 있고, 폭과 높이를 고정했다.
3 및 4에 배경 그래픽이 포함되어 있지만 동적 높이가 필요합니다. 많은 콘텐츠가있을 것이라는 것을 의미합니다. 추가 콘텐츠에 비례하여 3과 4가 더 높을 것입니다. 또한 3과 4는 항상 바닥 글을 만져야합니다.
나는 쉽게 알 수 있지만, 그 자리에 3과 4를 배치하기가 힘듭니다. 무엇이 필요한 HTML/CSS 구조 또는이를 수행하는 방법?
추가됨 :
Base code - 영역 1과 2에서, 내용과 관계없이 영역의 크기의 바닥 글로 가입 할 영역 3, 4해야한다.
아마도이 작업을 수행하는 더 간단한 방법이 있지만 형제의 동적 높이와 일치하도록 열을 늘리는 것은 까다로운 일이며 종종 절대 위치 지정에 의존합니다.
다이어그램의 div # 1과 # 3, 동적 콘텐츠의 div 및 다이어그램의 div 2와 div가 포함 된 열에 대해 3 개의 div를 만듭니다.
이 3을 div에 넣으십시오 (이 ID에는 "all"이라는 ID를 부여했습니다). 이 컨테이너에 clearfix 스타일을 적용합니다 (CSS 끝 부분에 정의 된 스타일). 위치 적용 :이 div와 관련이 있습니다. 3 열을 포함하도록이 컨테이너의 너비를 정확하게 설정해야합니다 (절대 위치의 세 번째 열을 올바르게 계산하는 데 필요)
디자인에 따라 3 열의 너비를 고정하고 첫 번째 열 2. 그러나 세 번째 위치를 정하십시오 : 절대적입니다. 세트 상단 : 0px; 하단 : 0 픽셀, 오른쪽 : 0 픽셀;
그런 다음 원하는 비율에 따라 백분율로 2 개 div의 높이를 설정하십시오.
내 솔루션에 꽤 많은 부분이 있습니다. 그래서 코드를 jsfiddle에 보관했습니다. http://jsfiddle.net/feaLC/5/
동적 내용 영역의 텍스트 양을 조정하여 작동 방식을 확인합니다.
UPDATE - 완전히 아스 커의 설명에 따라 개정 된 :
내가 절대적으로이를 줄은 왼쪽 및 오른쪽 콜 럼을 배치하고 절대적으로 그 두 기둥의 각 내부의 2 DIV 위치 바닥에 모든 방법을 스트레칭 : 또한
참조 : http://jsfiddle.net/feaLC/6/
HTML :
<div id="header"></div>
<div id="all" >
<div id="leftCol">
<div id="left1"></div>
<div id="left3"></div>
</div>
<div id="content">text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text
</div>
<div id="rightCol">
<div id="right2"></div>
<div id="right4"></div>
</div>
</div>
<div id="footer"></div>
CSS : 작은 jQuery로
#all, #footer, #header{position:relative;width:500px;}
#footer, #header{background:green;height:30px;}
#content{width:300px;padding:0px 100px}
#rightCol, #leftCol{position:absolute;width:100px;top:0px;bottom:0px;}
#rightCol{left:0px;}
#leftCol{right:0px;}
#left1, #right2{background:yellow;height:100px;}
#left3, #right4{background:DarkRed;position:
absolute;left:0px;right:0px;bottom:0px;top:100px;}
솔루션이 왼쪽 열에 적합하지 않거나 뭔가 누락 된 것 같습니다. :/또한 - 픽셀 단위로 고정 된 높이로 div 1과 2를 갖고 싶습니다. 그 단순한 효과로 미친 듯이 복잡해 보입니다 : /. –
왼쪽 열의 동작 방식을 분명하지 않습니다. 내가 읽었을 때, 중앙 부분이 늘어나거나 줄어드는 반면 고정 된 높이를 원한다. 아니면 어떻게 다른가요? – Faust
나는 중심 영역이 커야한다는 것을 의미했고 영역 3과 4도 함께 커야하고 영역 1과 2는 고정 된 높이를 픽셀로 측정해야합니다. 또한 영역 3과 영역 4는 항상 바닥 글 영역과 영역 1과 2를 터치해야합니다. –
.
<html>
<head>
<title>div align</title>
<script src="Script/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.flex').height($('#main').height() - 200);//200 height of 1 or 2 div (assume 1 and 2 div has same height)
});
</script>
</head>
<body>
<div style="width:800px; margin:auto;">
<div style="height:100px; border:1px solid RED">Header</div>
<div >
<div style="width:100px; float:left; border:1px solid pink">
<div class="sdiv" style="width:100px; height:200px; border:1px solid RED">div 1</div>
<div class="flex" style="border:1px solid Black"> div 3</div>
</div>
<div id="main" style="width:590px; float:left; border:1px solid BLUE">
dynamic content<br />
<br />text
<br />
<br />
<br />text
<br />
<br />text
<br />
<br />text
<br />
<br />text
<br />
<br />
<br />text
<br />
<br />text
<div style="clear:both"></div>
</div>
<div class="flex" style="width:100px; float:right; border:1px solid pink">
<div class="sdiv" style="width:100px; height:200px; border:1px solid GRAY">div 2</div>
<div class="flex" style="border:1px solid Black"> div 4</div>
</div>
<div style="clear:both"></div>
<div style="height:30px; border:1px solid GREEN">Footer</div>
</div>
</div>
</body>
</html>
필요에 따라 업데이트 할 수 있도록 jsfiddle에서 코드를 복사 할 수 있습니까? –
jsfiddle에 대한 링크를 일부 코드와 함께 추가했습니다. –