UI-Router : 높이 : 본문 요소에서 100 % 중첩 된보기 높이를 무시합니다.

중첩 된보기를 자주 사용하는 각형 응용 프로그램을 작성하고 있습니다. 그러나 특정보기는 페이지의 다른 요소보다 높으며 상위보기 끝까지 확장됩니다.UI-Router : 높이 : 본문 요소에서 100 % 중첩 된보기 높이를 무시합니다.

나는 height:100%으로 설정된 div 주위의 래퍼를 사용하고 있으며, 페이지를 적용하고 중첩 된보기의 바닥 글을 이동할 수있는 페이지를 기대했지만, 스타일 요소를보고 있습니다. 바닥 글 border 및 background-color은 부모 div의 끝에 남은 반면 바닥 글의 내용은 중첩 된 div의 끝으로 푸시됩니다. 정말 NG-경우 바닥 글을 변경하거나 사용하는 것과 hackier 보인다 무언가에 CSS를 고정에서 모든 솔루션을 찾고 있어요

: 나는 정확한 언어를 얻기에 어려움을 겪고있어 같은 이미지를 포함

특정 페이지에서/ng-class. 내가 CSS/UI-Router에 대해 오해하고 있다고 생각하지만 실제로 추적 할 수는 없다.

코드가 실제로 흥미롭지는 않지만 여기에 있습니다. 만약 신장 백분율 값 (즉, 상대적으로 고도)를 사용하는 경우

CODE

.wrapper { 
 
    min-height: 100%; 
 
    margin-bottom: -50px; 
 
} 
 
.push { 
 
    height: 50px; 
 
} 
 
.footer { 
 
    display: block; 
 
    height: 50px; 
 
} 
 
.nested { 
 
    max-height: 500px; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div> 
 
     <h1>Some text</h1> 
 
     <ui-view class="nested"></ui-view> 
 
    </div> 
 
    <div class="push"></div> 
 
    </div> 
 
    <footer class="footer"> 
 
    <span>some copy</span> 
 
    </footer> 
 
</body>

출처

2016-10-04 brokyo

이 재현 데모를 만들 같이 귀하의 경우에는 당신은 또한 몸과 HTML에 height: 100%이 필요합니다. CSS'flexbox'는이 모든 것을 치료할 것입니다. – charlietfl

이것은 순수한 CSS 문제 (CSS의 특정 측면을 이해하는 데 도움이 됨)이며 특히 각도와는 아무런 관련이 없습니다. 고정 된 높이를 설정하는 것입니다. 래퍼의 높이는 최소 높이 만 설정 했으므로 제한되지 않습니다. 그러나 바디의 높이가 제한되어 있으므로 해당 높이보다 더 확장 된 내용은 body 요소에서 흘러 나오도록 허용되지만 _extend_ 신장. 뷰포트와 관련된 단위, 특히'vh '를 살펴보고이를 (min-) 높이로 사용하십시오. 퍼센테이지의 높이와는 달리 부모 요소에 고정 높이가 필요하지 않습니다. – CBroe

사과 @CBroe하지만 귀하의 제안을 따르고 있는지 잘 모르겠습니다. 에 최소 높이의 뷰포트 단위를 적용하려고 했습니까? 제가 시도했거나 작동하지 않은 것입니다 ... 또는 내가 제안한 것을 완전히 잘못 읽었습니다. – brokyo

은 부모 요소의 높이도 정의 할 수있다.

html, body { 
    height: 100%; 
}

출처

2016-10-05 00:36:35 Johannes

UI-Router : 높이 : 본문 요소에서 100 % 중첩 된보기 높이를 무시합니다.

답변

관련 문제