컨테이너 div를 하나의 child div의 높이로 만들고 다른 자식 div의 컨테이너 높이를 div로 만듭니다.

우선, 해당 제목을 유감스럽게 생각합니다. 나는 그런 것들을 쓰는 것이 최선이 아닙니다.컨테이너 div를 하나의 child div의 높이로 만들고 다른 자식 div의 컨테이너 높이를 div로 만듭니다.

두 div (#a 및 #b)가 포함 된 컨테이너 div (#container라고 부름)가 있습니다. 나는이 두 사업부의 내용을 통제하지 못한다.

# 컨테이너의 높이를 #a로 지정합니다. 또한 #b를 #container의 100 %로 늘리거나 줄이려면 필요할 경우 스크롤바가 있어야합니다.

믿을 수 없을만큼 쉽게 들릴 수 있지만 나는이 작업을 시도하는 데 시간을 들였습니다.

이것이 가능하지 않으면 다음과 같이 처리해야합니다. #container의 높이가 고정되어 있고, #b의 높이가 고정되어 있습니다. #a에는 제어 할 수없는 높이가있는 두 개의 블록 수준 요소 (# 1 및 # 2)가 있습니다. # 2는 #a의 100 %에서 # 1의 높이를 뺀 값이어야합니다.

이 중 하나가 가능하다고 알려주십시오.

출처

2009-09-05 Alan

일부 코드를 게시하거나 페이지의 레이아웃을 정교하게 작성하십시오. – adatapost

첫 번째 요구 사항은 #container는 항상 스크롤 막대가있을 것 #B #A가 #container –

의 모든 높이를 필요하기 때문에 표시하려면 몇 정착 것을 의미 # A의 높이로 말한다 자바 스크립트 라인? –

이러한 masochistic 종류의 CSS 변경 사항을 좋아합니다. 나는 해결책을 마련했다 오히려 놀란다 : 왼쪽 오른쪽보다 크고 여전히 작동 곳

<html> 
<head> 
<style type="text/css"> 
html, body, div { margin: 0; padding: 0; } 
#container { width: 600px; height: auto; margin: 0 auto; background: orange; position: relative; } 
#left { background: green; width: 300px; } 
#right { overflow: auto; background: yellow; width: 300px; position: absolute; top: 0; bottom: 0; right: 0; } 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="left"> 
<p>f this is not possible, I would settle for this: #container has a fixed height, #b has a fixed height. #a has two block-level elements (#1 and #2) that have uncontrollable heights. #2 should be 100% of #a, minus the height of #1.</p> 
<div id="right"> 
<p>I have a container div (let's call it #container) which contains two divs (#a and #b). I am not in control of the content of these two divs.</p> 
<p>I want #container to be the height of #a. I also want #b to stretch (or shrink, depending) to 100% of #container, and have a scrollbar, if necessary.</p> 
</div> 
</div> 
</body> 
</html>

그것을보십시오.

DOCTYPE을 추가하여 IE를 약간 덜 짜증나게 만들 가치가 있습니다.

출처

2009-09-05 08:45:25 cletus

놀라운! 그건 완벽하게 작동합니다! 정말 고맙습니다. – Alan

더 많은 작업을 한 후에, 이것은 완벽하지 않습니다. http://www.alistapart.com/articles/conflictingabsolutepositions/ (저주!) 이미 IE6에 대한 조건부 스타일 시트를 가지고 있기 때문에 , 나는 단지 절대적 위치 사업부 :이 ALA 문서에서 설명한대로 그것은 IE6에서 작동하지 않습니다 오른쪽 상단에 오른쪽을 대고 고정 된 높이를주었습니다. #container의 높이까지 늘어나지는 않지만 최소한 컨테이너처럼 맨 아래로 직진하지는 않습니다. – Alan

컨테이너 div를 하나의 child div의 높이로 만들고 다른 자식 div의 컨테이너 높이를 div로 만듭니다.

답변

관련 문제