부유한 디브를 부모의 100% 높이로 만드는 방법은?

부유한 디브를 부모의 100% 높이로 만드는 방법은?

HTML은 다음과 같습니다.

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

여기 CSS가 있습니다.

#inner {
  float: left;
  height: 100%;
}

Chrome developer tool로 검사한 결과 inner div의 높이가 0px가 되고 있습니다.

어떻게 하면 부모 디브의 키의 100%가 되도록 강요할 수 있습니까?

부모의 경우:

display: flex;

몇 가지 접두사를 추가해야 합니다. http://css-tricks.com/using-flexbox/

편집: 유일한 단점은 IE가 평소와 다름없으며 IE9는 플렉스를 지원하지 않습니다.http://caniuse.com/flexbox

편집 2: @oddsby에서 언급했듯이 정렬 항목은 상위 항목이며 기본값은 실제로 스트레치입니다.자식에 대해 다른 값을 원할 경우 align-self 속성이 있습니다.

편집 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

위해서#outer키는 그 내용에 근거해야 하고, 가지고 있어야 합니다.#inner그 높이를 기준으로 두 요소를 모두 절대적으로 배치합니다.

CSS 높이 속성에 대한 사양에서 더 자세한 내용을 확인할 수 있지만, 본질적으로,#inner무시해야 함#outer키 if#outer키가.auto, 그렇지 않으면 #outer절대적으로 위치합니다.그리고나서#inner키가 0이 됩니다. 그렇지 않으면 #inner그 자체가 절대적인 위치에 있습니다.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

하지만..위치별#inner당연하게도, a.float설정이 무시되므로 다음에 대한 너비를 선택해야 합니다.#inner명시적으로, 패딩을 추가합니다.#outer당신이 원하는 문자 포장을 가짜로 만드는 겁니다예를 들어, 아래의 패딩은#outer는 폭입니다.#inner+3. 편리하게 (중요한 것은)#inner높이 100%로 텍스트를 아래에 둘 필요가 없습니다.#inner, 그래서 이건 마치 우리가.#inner떠 있습니다.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

당신의 목표에 대한 너무 많은 잘못된 가정에 근거한 것이라 이전 답변을 삭제했습니다.

실제로 부모 요소가 위치하기만 하면 자녀의 키를 100%로 설정할 수 있습니다.즉, 부모가 절대적인 위치에 놓이기를 원하지 않을 경우입니다.자세한 설명을 드리겠습니다.

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

IE8 이전 버전의 Internet Explorer(인터넷 익스플로러)를 지원할 필요가 없다면 다음을 사용할 수 있습니다.display: table-cell이를 달성하기 위해:

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

이것은 각 요소를 강제로 사용할 것입니다..inner부모 요소의 전체 높이를 차지하는 클래스.

저는 당신의 문제를 해결하기 위해 예를 들었습니다.

포장지를 만들어서 띄운 다음에 절대 디브를 배치해서 100% 높이로 줘야 합니다.

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

설명:.right div는 절대적으로 위치합니다.즉, CSS에서 너비 또는 높이 속성이 명시적으로 선언된 경우에만 해당 너비 및 높이, 상단 및 왼쪽 위치가 첫 번째 상위 디브 절대 또는 상대적 위치를 기준으로 계산됩니다. 명시적으로 선언되지 않은 경우 해당 속성은 상위 컨테이너(.right-wrapper)를 기준으로 계산됩니다.

따라서 DIV의 100% 높이는 .container 최종 높이를 기준으로 계산되며, .right 위치의 최종 위치는 상위 컨테이너를 기준으로 계산됩니다.

다음은 이를 달성하는 보다 간단한 방법입니다.

1. 3가지 요소의 컨테이너(#outer) 디스플레이 설정: table
2. 그리고 요소 자체 설정 (#내부) 디스플레이 : table-
3. 부동액을 제거합니다.
4. 성공.

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

@Itay in Floated div 덕분에 키 100%

만약 여러분이 약간의 jQuery를 사용할 준비가 되었다면, 답은 간단합니다!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

이것은 일반적으로 주위를 감쌀 수 있는 다른 부유된 요소들이 한 쪽에 고정되어 있는 반면, 그 모체의 높이가 100%인 한 쪽에 단일 요소를 띄우는 데 효과적입니다.

이것이 jQuery 동료 팬들에게 도움이 되길 바랍니다.

높이가 같은 그리드 시스템의 코드 샘플입니다.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

위는 외부 div를 위한 CSS입니다.

#inner{
width: 20%;
float: left;
border: 1px solid;
}

위는 이너 디브입니다.

이것이 당신에게 도움이 되길 바랍니다.

이게 도움이 됐어요.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

오른쪽: 및 왼쪽: 원하는 #내부 너비를 설정합니다.

동일한 높이를 가진 여러 자식 요소가 필요할 때와 유사한 경우는 플렉스박스를 사용하여 해결할 수 있습니다.

https://css-tricks.com/using-flexbox/

세트display: flex;부모님과flex: 1;아동 요소의 경우, 모두 같은 높이를 가질 것입니다.

해라

#outer{overflow: auto;}

다음에서 추가 옵션을 표시합니다.부유한 원소의 부모가 무너지지 않게 하려면 어떻게 해야 합니까?

언급URL : https://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent