부모의 신장에 신장 DIV 신장 (하드 코딩 높이 없음)

부모의 바닥까지 스트레칭하고 싶은 자식 DIV의 부모 DIV가 있습니다. 현재에도 불구하고 가지고 있지 않음 height:auto!important; 문제를 보여주는 스크린 샷은 here으로 볼 수 있습니다.부모의 신장에 신장 DIV 신장 (하드 코딩 높이 없음)

.main.top0 
    .infoPanel.koneksa_bg_blue 
     .innerPanel.mtop0.mbottom0 
      .infoCaption.font8em.koneksa_white 404 
      .infoCaption.koneksa_white We can't find the page you are looking for 
      .infoCaption.koneksa_white 
       | Don't worry. Just try to go back or 
       a.koneksa_white.underline(href='/') home 
    .footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray

main DIV는 부모와 infoPanel 난에 어려움을 겪고입니다 (위의 그림에서 파란색으로 색) 아이입니다 다음과 같이

(옥 템플릿 등) 관련 HTML은 뻗기.

해당 CSS는 다음과 같습니다

.main { 
    width:100%; 
    min-height:700px; 
    height:auto!important; 
    overflow: hidden; 
    z-index: 1; 
    top:3em; 
    position: relative; 
} 
.infoPanel { 
    width:100%; 
    height:auto!important; 
    display: block; 
    padding:0; 
} 
.innerPanel { 
    width:90%; 
    padding:40px 0; 
    height:auto!important; 
    margin:0 5%; 
    display: block; 
}

나는 이것이 매우 일반적인 문제는 것을 알고 있어요하지만 대답은 하드 코딩 된 높이를 포함하도록 항상 것처럼 보인다. 필자는 데스크톱 스타일링을위한 완벽하게 훌륭한 솔루션 이었지만 모바일 장치에 표시되도록 의도 되었기 때문에 하드 코딩 된 높이보다 좀 더 응답 성이 좋기를 바랍니다.

제공 할 수있는 정보에 감사드립니다.

편집 : 요청에 따라

생성 된 HTML :

html, body { 
    height: 100% 
} 

.main { 
    position: absolute; 
    top: 3em; 
    bottom: 0; 
    width: 100%; 
}

이 특이한 솔루션 보이지만 :

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/html"></html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes"> 

    // Imports removed 

    <link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)"> 
    <link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)"> 
</head> 
<body class="tk-futura-pt koneksa_gray"> 
    <div class="fullNav koneksa_bg_white boxShadow"> 
     <div class="centerPanel"> 
     <div class="mleft2 left khmoniker"></div> 
     <div class="menu right"><a href="/login" class="right mright2 menuItem">customer login</a></div> 
     </div> 
    </div> 
    <div class="main top0"> 
     <div class="infoPanel koneksa_bg_blue"> 
     <div class="innerPanel mtop0 mbottom0"> 
      <div class="infoCaption font8em koneksa_white">404</div> 
      <div class="infoCaption koneksa_white">We can't find the page you are looking for</div> 
      <div class="infoCaption koneksa_white">Don't worry. Just try to go back or <a href="/" class="koneksa_white underline">home</a></div> 
     </div> 
     </div> 
     <div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray"> 
     <div class="innerPanel"> 
      <div class="caption left"> 
       <h5 class="konekea_blue_gray mtop2">&copy; template-filler</h5> 
       <div class="kh_reverse_logo mtop2"></div> 
      </div> 
      <div class="caption right"><a href="/terms.html" target="_blank" class="konekea_blue_gray mtop2">Terms</a><a href="/privacy.html" target="_blank" class="konekea_blue_gray mtop1">Privacy</a><a href="/" target="_blank" class="konekea_blue_gray mtop1">Corporate</a></div> 
     </div> 
     </div> 
    </div> 
</body>

출처

2015-02-03 Myles Barros

class .infoPanel –

에서 'height : 100 %'를 사용하면 상위 요소의 높이가 사전 정의되지 않았기 때문에 '높이 : 100 %'를 사용하면 효과가 없습니다. 'min-height' 속성 –

help @ JPrakash에 감사드립니다. .infoPanel의 높이를 100 %로 변경했지만 불행히도 시각적 인 변화는 일어나지 않습니다. 나는 속성 인스펙터를 두 번 체크했는데 높이가 변하지 않았고 DIV의 높이에 다른 클래스가 작용하지도 않았다. Thijs가 부모 요소의 높이를 하드 코딩해야한다고 주석을 달았으므로 피하려고합니다. –

-1

하나의 솔루션으로 모든 현대적인 브라우저에서 작동 다음을 수행하는 것입니다 최신 브라우저는 실제로 정의 된 4면 모두를 동시에 존중하고 요소를 늘려 일치시킵니다. 다음은 jsFiddle 예제입니다. http://jsfiddle.net/nqt7vqs1/2/

position : absolute는 하위 요소 위치 지정을 위해 absolute :를 암시하기 때문에 모든 하위 요소에도 동일하게 적용 할 수 있습니다.

이 솔루션이 작동하지 않는 경우

또 다른 옵션은 다음을 수행하는 것입니다

html, body { 
    height: 100% 
} 

.main { 
    position: absolute; 
    top: 0; 
    height: 100%; 
    margin: 3em 0 -3em 0; 
    overflow: hidden; 
}

이것은 또한 모든 현대적인 브라우저에서 작동하는 "숨겨진 마진"트릭입니다. 이 설정으로 같은 피들 : http://jsfiddle.net/nqt7vqs1/3/

출처

2015-02-04 21:43:38

부모의 신장에 신장 DIV 신장 (하드 코딩 높이 없음)

답변

관련 문제