최소 키의 자녀 내부 부모: 100% 키를 상속하지 않음
페이지의 전체 높이를 차지할 수 있는 디브 컨테이너를 만드는 방법을 찾았습니다.min-height: 100%; div set을 때 . 된 을 할 할 을 된 height: 100%;, 컨테이너 높이까지 늘어나지 않습니다.고칠 방법이 있습니까?
html, body {
height: 100%;
margin: 0;
}
#containment {
min-height: 100%;
background: pink;
}
#containment-shadow-left {
height: 100%;
background: aqua;
}<div id="containment">
<div id="containment-shadow-left">
Hello World!
</div>
</div>더하다height: 1px부모 컨테이너에 연결합니다.Chrome, FF, Safari 작동합니다에서.
나는 이것을 어디에서도 보지 못했기 때문에 이것을 공유할 것이라고 생각했고, 이것이 내 해결책을 고치기 위해 사용한 것입니다.
해결책:min-height: inherit;
나는 최소 키를 가진 부모가 있었고, 나도 그 키가 될 아이가 필요했습니다.
.parent {
min-height: 300px;
background-color: rgba(255,255,0,0.5); //yellow
}
.child {
min-height: inherit;
background-color: rgba(0,255,0,0.5); //blue
}
p {
padding: 20px;
color: red;
font-family: sans-serif;
font-weight: bold;
text-align: center;
}<div class="parent">
<div class="child">
<p>Yellow + Blue = Green :)</p>
</div>
</div>이렇게 하면 이제 어린이는 최소 키의 100% 키 역할을 합니다.
몇몇 사람들이 이것을 유용하게 생각했으면 좋겠습니다 :)
보고된 웹킷(webkit/webkit) 버그입니다. 최소 키를 가진 부모의 자녀가 키 속성을 상속할 수 없습니다. https://bugs.webkit.org/show_bug.cgi?id=26559
파이어폭스도 영향을 받은 것 같습니다. (현재 IE에서 테스트할 수 없습니다.)
가능한 해결 방법:
- add position: #containment로 이동
- 위치 추가:절대적으로 #containment-light-left
내부 요소에 절대 위치가 있을 때 버그가 나타나지 않습니다.
http://jsfiddle.net/xrebB/ 참조
2014년 4월 10일 편집
저는 현재 부모 컨테이너가 꼭 필요한 프로젝트를 진행하고 있기 때문에min-height를 물려받는 요소에 는 좀 더를 해보았는데,의 를 을 해 해 의 을 를 .
첫째: 현재 브라우저 동작이 정말 버그인지 더 이상 확신할 수 없습니다.CSS 2.1 사양은 다음과 같습니다.
백분율은 생성된 상자에 들어 있는 블록의 높이를 기준으로 계산됩니다.포함하는 블록의 높이가 명시적으로 지정되지 않은 경우(즉, 내용 높이에 따라 다름), 이 요소가 절대적으로 배치되지 않은 경우 값은 '자동'으로 계산됩니다.
컨테이너에 최소 높이를 입력하면 높이를 명시적으로 지정하지 않으므로 요소가 다음을 입력해야 합니다.auto과 다른이 하는 그리고 그것이 바로 웹킷과 다른 모든 브라우저들이 하는 일입니다.
둘째, 발견한 해결책:
컨테이너 요소를 다음으로 설정하는 경우display:table와 함께height:inherit마치 내가 주었던 것과 똑같은 방식으로 행동합니다.min-height100% 의 그리고 -더은 - 를 그리고 - 더 만약 자식 - 요소를 것은 중요한 요소를 자식 100 to the i 것은 - 만약 중요한 set 그리고 - %display:table-cell100% 이상이든 컨테이너 요소의 높이를 완벽하게 이어받습니다.
전체 CSS:
html, body {
height: 100%;
margin: 0;
}
#container {
background: green;
display: table;
height: inherit;
width: 100%;
}
#content {
background: red;
display: table-cell;
}
마크업:
<div id="container">
<div id="content">
<p>content</p>
</div>
</div>
http://jsfiddle.net/xrebB/54/ 를 참조하십시오.
@jackocnr님이 댓글로 추가한 내용인데 놓쳤습니다.현대 브라우저의 경우 이것이 가장 좋은 접근법이라고 생각합니다.
너무 작으면 내부 요소가 용기 전체를 채우도록 하고, 너무 크면 용기 높이를 확장합니다.
#containment {
min-height: 100%;
display: flex;
flex-direction: column;
}
#containment-shadow-left {
flex: 1;
}
비록 ~일지라도display: flex;되었으니,되었으니,해를 사용하는 것을 해 보시기 바랍니다.display: grid;지금은 널리 지지를 받고 있습니다.기본적으로 그리드의 유일한 자식은 부모를 모두 채웁니다.
html, body {
height: 100%;
margin: 0;
padding: 0; /* Don't forget Safari */
}
#containment {
display: grid;
min-height: 100%;
background: pink;
}
#containment-shadow-left {
background: aqua;
}Kushagra Gour의 솔루션은 (적어도 Chrome과 IE에서는) 작동하며 사용할 필요 없이 원래 문제를 해결합니다.display: table;그리고.display: table-cell;. 플렁커 참조: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU
설정 min-height: 100%; height: 1px;필요에 따라 실제 높이는 최소 100%가 됩니다.또한 내측 디브가 높이를 올바르게 상속할 수 있습니다.
단위 도 에 도 vh◦ 아래의 간단한 토막글입니다.h와 함께 할 수 .calc()예를 들면min-height: calc(100vh - 200px);지과을질때이때e질n가 있을 때200px높이를 같이 하다
body {
margin: 0;
}
.child {
min-height: 100vh;
background: pink;
}<div class="parent">
<div class="child"></div>
</div>이것은 보통 저에게 효과가 있습니다.
.parent {
min-height: 100px;
background-color: green;
display: flex;
}
.child {
height: inherit;
width: 100%;
background-color: red;
}<!DOCTYPE html>
<html>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>저는 이것이 브라우저의 버그라고 생각하지 않습니다.모든 동작이 동일합니다. 즉, 명시적 높이 지정을 중지하면 최소 높이는 기본적으로 "마지막 단계"입니다.
CSS 2.1 사양이 정확히 제안하는 방식인 것 같습니다. http://www.w3.org/TR/CSS2/visudet.html#the-height-property
백분율은 생성된 상자에 들어 있는 블록의 높이를 기준으로 계산됩니다.포함하는 블록의 높이가 명시적으로 지정되지 않은 경우(즉, 내용 높이에 따라 다름), 이 요소가 절대적으로 배치되지 않은 경우 값은 '자동'으로 계산됩니다.
로서.min-height에이다인n가 없습니다.height속성 집합, 기본값은 auto입니다.
를 은 과 할 과 를 은 할 display: table-cell할 수 있습니다. 하다면, 에 한 와 을 할 의 할 을 당신은 또한 특정한 상황에서 이것을 제압할 수 있습니다.top그리고.bottom지정하지 않고 100% 높이를 제공하는 절대 위치 내부 요소의 속성입니다.
구글링자의 경우:
이 쿼리 해결 방법을 사용하면 #containment가 자동으로 높이를 얻은 다음(높이: auto) 실제 높이를 픽셀 값으로 할당합니다.
<script type="text/javascript">
<!--
$(function () {
// workaround for webkit-bug http://stackoverflow.com/a/8468131/348841
var rz = function () {
$('#containment')
.css('height', 'auto')
.css('height', $('#containment').height() + 'px');
};
$(window).resize(function () {
rz();
});
rz();
})
-->
</script>
또 다른 JS 솔루션은 쉬운 CSS 전용 또는 추가 마크업/해키 솔루션을 피하기 위해 사용할 수 있습니다.
function minHeight(elm, percent) {
var windowHeight = isNaN(window.innerHeight) ?
window.clientHeight : window.innerHeight;
var height = windowHeight * percent / 100;
elm.style.minHeight = height + 'px';
}
W/jQuery:
function minHeight($elm, percent) {
var windowHeight = $(window).height();
var height = windowHeight * percent / 100;
$elm.css('min-height', height + 'px');
}
각도 지시:
myModule.directive('minHeight', ['$window', function($window) {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
var windowHeight = isNaN($window.innerHeight) ?
$window.clientHeight : $window.innerHeight;
var height = windowHeight * attrs.minHeight / 100;
elm.css('min-height', height + 'px');
}
};
}]);
다음과 같이 사용하려면:
<div>
<!-- height auto here -->
<div min-height="100">
<!-- This guy is at least 100% of window height but grows if needed -->
</div>
</div>
오늘날 이를 달성하는 가장 좋은 방법은 다음을 사용하는 것입니다.display: flex;. 그러나 IE11을 지원하려고 할 때 문제가 발생할 수 있습니다.flexbox를 사용하는 https://caniuse.com 에 따르면 다음과 같습니다.
IE 11은 최소 높이를 사용할 때 항목을 수직으로 올바르게 정렬하지 않습니다.
Internet Explorer 호환 솔루션
은 입니다를 사용하는 입니다.display: table;display: table-row; 아이 height: 100%;으로의 min-height: 100%;.
에 나열된 은 에 의 은 된 을 사용합니다.display: table,table-row및는table-cell 은 을 하지 하지 을 은 min-height: 100%;, 다음과 같습니다.
- 의 의 를 이 합니다 하는 된 합니다 의 된
height재산); - 의 키보다 허용합니다.
min-height;
솔루션을 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ min-height버그를 우회할 수 있는 필요는 없습니다.
설명.
이것이 작동하는 이유는 대부분의 요소들과 달리, 사용하는 요소들이display: table그리고.table-row항상 그들의 콘텐츠만큼 클 것입니다.이 그들의이를 .heighto와 합니다.min-height.
솔루션 실행 중
html, body {
height: 100px;
margin: 0;
}
#containment {
display: table;
height: 100%;
background: pink;
width: 100%;
}
#containment-shadow-left {
display: table-row;
height: 100%;
background: aqua;
}
#content {
padding: 15px;
}
#demo {
display: none;
background-color: red;
height: 200px;
}
#demo-checkbox:checked ~ #demo {
display: block;
}<div id="containment">
<div id="containment-shadow-left">
<div id="content">
<input id="demo-checkbox" type="checkbox">
<label for="demo-checkbox">Click here for overflow demo</label>
<div id="demo">This is taller than #containment</div>
</div>
</div>
</div>이것을 상위 구성요소에 추가하면 이를 수정할 수 있습니다.
display: flex;
flex-direction: column;
이 주제를 완벽하게 유지하기 위해 고정 위치를 사용하여 여기서 탐구하지 않은 해결책을 찾았습니다.
오버플로 없음
html, body, .wrapper, .parent, .child {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 100%;
}
.child {
overflow: auto;
background: gray;
}
.height-50 {
height: 50%;
width: 5em;
margin: 10px auto;
background: cyan;
}<div class="wrapper">
<div class="parent">
<div class="child">
<div class="height-50"></div>
</div>
</div>
</div>오버플로 포함
html, body, .wrapper, .parent, .child {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 100%;
}
.child {
overflow: auto;
background: gray;
}
.height-150 {
height: 150%;
width: 5em;
margin: 10px auto;
background: cyan;
}<div class="wrapper">
<div class="parent">
<div class="child">
<div class="height-150"></div>
</div>
</div>
</div>솔루션 2022년 7월 06일
.parent{
display: flex; /* very important rule */
flex-direction: column; /* very important rule */
min-height: 100%
}
.child{
height: 100%;
flex-grow: 1; /* very important rule, simulate flex: 1; */
}<div class="parent">
<div class="child">
</div>
</div>시간이 꽤 흘렀지만, 다른 사람이 아직도 이 문제로 힘들어한다면, 저는 제 해결책을 찾았습니다.부모가 최소한의 키를 가져야 하고, 자식(여러 이미지/파일 미리보기 포함)이 부모 전체를 차지해야 합니다.
저는 키가 없는 부모가 아이들에게 키를 최소로 규정하여 아이들의 만족도에 따라 성장할 수 있도록 했습니다.
CSS
.parent{
border: 1px solid black;
border-radius: 5px;
}
.children{
width: 100%;
min-height: 100px;
}
HTML:
<div class="parent">
<div class="children">
some content inside
</div>
</div>
더하다align-self: normal자식 항목에 적용할 수 있습니다.
우리 것을 시도한 후! 크롬은 내가 디스플레이 값을 인라인 블록으로 설정할 때 어린이 요소가 100% 높이가 되기를 원한다는 것을 이해합니다. 그나저나 플로트를 설정하면 그것이 발생합니다.
display:inline-block
갱신하다
안 돼요.해결책은 부모 노드 오프셋 높이를 가져와 자바스크립트로 페이지의 및 에서 사용하는 것입니다.
<script>
SomedivElement = document.getElementById('mydiv');
SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';
</script>
이것이 백분율 기준 키와 부모가 여전히 아이들의 키에 따라 성장하는 저에게 도움이 되는 것입니다.Firefox, Chrome 및 Safari에서 정상 작동합니다.
.parent {
position: relative;
min-height: 100%;
}
.child {
min-height: 100vh;
}<div class="parent">
<div class="child"></div>
</div>언급URL : https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
'programing' 카테고리의 다른 글
| 텍스트 편집에 초점을 프로그래밍 방식으로 설정하고 키보드를 표시하는 방법 (0) | 2023.09.06 |
|---|---|
| AVAssetReader로 파형 그리기 (0) | 2023.09.06 |
| 다중 테넌트 mysql 데이터베이스를 설계하는 방법 (0) | 2023.09.06 |
| 매트플롯 리브 '백엔드'를 설정하려면 어떻게 해야 합니까? (0) | 2023.09.06 |
| 장인 마이그레이션 오류 140 잘못된 생성 옵션 (0) | 2023.09.06 |