부모 div의 높이가 "min-height"인 경우 내부 div의 높이를 부모 div의 높이와 동일하게 설정하는 방법은 무엇입니까?

다음 예제에서 내부의 높이가 div 인 이유는 래퍼의 div과 다릅니다.부모 div의 높이가 "min-height"인 경우 내부 div의 높이를 부모 div의 높이와 동일하게 설정하는 방법은 무엇입니까?

HTML :

<div class="wrapper"> 
    <div class="inner">Hello</div> 
    <div class="inner">Peace</div> 
</div>

CSS : 나는 min-height: 100px;height: 100px;에, 다음 확인을 보이는 변경하는 경우

.wrapper { 
    background-color: #000; 
    min-height: 100px; 
} 
.inner { 
    display: inline-block; 
    background-color: #777; 
    height: 100%; 
}

. 하지만, 제 경우에는 min-height이 필요합니다.

출처

2011-05-04 Misha Moroshko

래퍼의 높이가 동적이 아닌 경우 내부가 동일한 높이를 가질 수있을 때 %를 사용해야하는 이유는 무엇입니까? 래퍼에 지정한 또한 내부가 100 % 높은 경우 래퍼 작업 내에서 두 개가 어떻게됩니까? – Marty

그 사이트에 대한 감사 btw Misha, 매우 도움이 될 것입니다 :) – iain

@iain : 클럽에 오신 것을 환영합니다. –

나는 이것이 당신이 원하는 출력이라고 생각 : http://jsfiddle.net/xhp7x/

.wrapper { 
    display: table; 
    background-color: #000; 
    height: 100px; 
    width: 100%; 
} 
.wrapper2 { 
    height: 100%; 
    display: table-row 
} 
.inner { 
    height: 100%; 
    display: inline-block; 
    background-color: #777; 
    margin-right: 10px; 
    vertical-align: top; 
}

두 번째 DIV의 wrapper2을 추가했다.

크롬 및 파이어 폭스 테스트 완료.

출처

2011-05-04 07:01:56 ariel

예제에서 래퍼에는 '최소 높이'가 없습니다. –

하지만 그렇게 행동합니다. 짧은 텍스트는 래퍼를 100 픽셀로 유지하고 높이 텍스트는이를 확장합니다. – ariel

OK ...하지만 내부 래퍼의 높이는 래퍼의 높이보다 작습니다. 나는 그들이 평등 해지기를 바란다. –

모두를 지정하려는 경우 CSS height은 min-height과 같지 않습니다. height과 min-height을 모두 지정하려고합니다. 이 명중 할 때까지 %으로 사용하면 창 작은 드래그

height는 =이 = 창 높이
min-height의 퍼센트하는 %height와 DIV 감소 할 것 당신은 큰 창 드래그 min-height
max-height는 =하는 %height와 DIV는 계속 증가 할 것 그것은 max-height

http://jsfiddle.net/gpeKW/2/를 돌 때까지 나는 테두리 여기에 샘플을 추가했습니다.

귀하의 의견에서 약간의 변경은 귀하의 원본 CSS에서 거의 정확합니다.

아래 HTML의 최소 div 높이는 100px입니다. 내부 DIV의 크기가 커질수록 래퍼는 자동으로 확장됩니다. 첫 번째 내부에 class에 style 특성을 추가하여이를 증명했습니다.

<html> 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     .wrapper 
     { 
      background-color: #000; 
      min-height:100px; 
     } 
     .inner 
     { 
      display: inline-block; 
      background-color: #777; 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="inner" style="height:200px">test</div> 
    <div class="inner">Peace</div> 
    </div> 
</body> 
</html>

출처

2011-05-04 07:05:59 iain

나는 그것을 시도했다. 그러나 만일 당신이 높이를 넣으면 div가 커지지 않는다. 내용이 100px보다 크다면 나는 그것이 전제 조건이라고 생각한다. – ariel

좋은 예가 아니다. – sandeep

예제에서 wrapper div에 'min-height'가 없다. . –

나는 부모 div의 높이와 같은이 아이의 부모와 절대 위치에 대한 상대 사용하는 것입니다 사업부 자식 높이를 설정하는 한 가지 방법을 알고있다.

.wrapper { 
    background-color: #000; 
    min-height: 100px; 
    position: relative; 
} 
.inner { 
    display: inline-block; 
    background-color: #777; 
    position: absolute; 
    height: 100%; 
}

그러나이 제대로 표시 될 수 있도록 몇 가지 문제가 발생할 것입니다 이런 식으로, 당신은 자식 요소를 조정해야

P/S : 당신은 같은 높이로 설정하지 않는 이유는 부모 높이? 내 말은, 100 %는 x %가 아니야. 그냥 생각해.어쨌든

, 행복 코딩)

출처

2011-05-04 07:19:00

흠 .. 이상하게도 높은 요소에 대한 높이를 확장하지 못했습니다. http://jsfiddle.net/kBRVH/ – ariel

http://jsfiddle.net/kBRVH/3/ 텍스트를 볼 수있는 첫 번째 요소 검은 색으로, 더 많은 라인을 삽입하면 바깥 쪽 div가 100 픽셀 높고 절대 위치의 자식이 높이를 높이면이 높이가 증가하지 않으므로 바깥 쪽 div가 오버플로됩니다. 반면에 두 번째 것은 흰색 텍스트로, 더 많은 줄을 삽입하면 보입니다.) –

CSS의 일부 속성은 자동으로 부모의 값을 상속, 일부는하지. 상위 높이를 상속하려면 최소 높이를 명시해야합니다.

min-height: inherit;

출처

2012-03-30 09:11:11 mystrdat

부모 div의 높이가 "min-height"인 경우 내부 div의 높이를 부모 div의 높이와 동일하게 설정하는 방법은 무엇입니까?

답변

관련 문제