div 컨테이너를 수직으로 확장하여

다른 질문에 많은 예제를 시도했지만 아무 것도 작동하지 않습니다. 나는 100px 너비의 사이드 바를 가진 div 컨테이너를 만들려고하는데, 동적으로 커지면 컨테이너와 함께 수직으로 확장 할 것이다. 아래를 참조하십시오, 나는 100 %div 컨테이너를 수직으로 확장하여

enter image description here

내 CSS는이 모습에 높이를 설정할 때 내부 사업부는 단순히도 성장하지 않을 것이다;

<style> 
    #outer { 
     border:10px solid #7A838B; 
     margin:10px; 
     border-radius:30px; 
     max-width:500px; 
     min-height:200px; 
    } 

    #leftblock { 
     background-color:#7A838B; 
     width:100px; 
     height:auto; 
     border-top-left-radius:20px; 
     border-bottom-left-radius:20px; 
     margin-left:-10px; 
     margin-top:-10px; 
    } 
    #inner { 
     color:white; 
     height:100%; 
    } 
    </style>

내 HTML은 이와 유사합니다. 높이를 설정하기 위해

<div id="outer"> 
     <div id="leftblock"> 
      <div id="inner"> 
       Test 
      </div> 
     </div> 
    </div>

출처

2014-08-31 Alastair W

자녀의 신장은 100 %입니다. 어떤 높이의 100 %, 정확하게? 부모에게는 높이가없고 조부모에게는 최저 높이 만 설정되어 있습니다. (높이를 설정하는 것과 같지 않습니다.) 내부 div가 얼마나 큰지 좀 더 구체적으로 지정할 수 있다면 좀 더 도움이 될 것입니다. 하지만 지금은 기본적으로 높이를 100 %로 설정하고 있습니다. – Antiga

답장을 보내 주셔서 감사합니다. 설명에서 말했듯이 왼쪽 블록을 같은 높이, 즉 조부모 컨테이너의 상단과 하단을 터치하여 설정하려고합니다. 조부모 컨테이너가 200px 미만이되지 않도록 최소 높이를 설정하고 싶습니다. 부모 (왼쪽 블록) 컨테이너는 내부 블록이 뻗어있는 부분에 따라 자동으로 높이가 확장되도록 설정됩니다. 세 개 모두를 100 %로 설정하더라도 내부 블록은 텍스트의 높이에 머물러 있습니다. –

는

높이를 설정하기 위해서는 : 100 %, 부모가 너무 정의 된 높이를 설정해야하지만 높이 속성 값이 '상속'일 경우, 조부모를 설정해야합니다 . 등등.

1) 부모 요소의 정확한 높이를 정의

당신은 기본적으로 하나, 여기에 두 가지 옵션이 있습니다. 그런 다음 100 % 신장이 작동합니다.

2)이 같은 position: absolute와 자식 요소를 늘이기 : http://jsfiddle.net/r02nbmd9/ -하여 부모의 position: relative와 자식의 position: absolute을 확인합니다.

<div class="parent"><div class="child"></div></div> 

<style> 
.parent { 
    position: relative; 
    width: 300px; min-height: 200px; 
    background: yellow; 
} 
.child { 
    position: absolute; top: 0; bottom: 0; 
    width: 100px; 
    background: red; 
} 
</style>

출처

2014-08-31 04:29:52

당신은 스타입니다! 치료를했다. 고맙습니다! –

: 100 %, 부모가 너무 정의 된 높이를 설정해야하지만 높이 속성 값이 '상속'일 경우, 조부모를 설정해야합니다. 등등.

이 CSS를 살펴보세요.

예 : 전체 브라우저 높이 용. 기본적으로

html, body { 
    height: 100%; 
} 
#outer { 
    height: 100%; 
} 
#leftblock { 
    height: 100%; 
} 
#inner {  
    height:100%; 
}

는 HTML 높이가 0 그래서, 당신은 적어도 한 부모의 '상속'이외의 높이 속성을 설정해야합니다.

@mmeverdies 말한대로 그것은 간다

출처

2014-08-31 04:07:48

div 컨테이너를 수직으로 확장하여

답변

관련 문제