부모의 부동 소수점 100 % 높이를 만드는 방법은 무엇입니까?

HTML은 다음과 같습니다.

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

그리고 여기 CSS가 있습니다 :

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

Chrome 개발자 도구로 검사하면 내부 div의 높이가 0px입니다.

상위 div 높이의 100 %가되도록하려면 어떻게해야합니까?

들면 #outer높이가 그 내용에 기초하고있는 것으로 #inner기재 그런의 높이를 절대 위치 두 요소를 만든다.

자세한 내용은 대한 사양에서 찾을 수 있습니다 CSS를 높이 속성 하지만, 본질적으로 #inner무시합니다 #outer경우 높이 #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절대적으로 배치 하면 float설정이 무시되므로 #inner명시 적으로 너비를 선택하고 #outer원하는 텍스트 줄 바꿈을 가짜로 채우기 위해 패딩을 추가 해야합니다. 예를 들어 아래에서 패딩은 #outer너비 #inner+3입니다. 편리하게 (전체 요점이 #inner100 % 에 도달 하기 #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>

목표에 대한 잘못된 가정이 너무 많기 때문에 이전 답변을 삭제했습니다.

부모의 경우 :

display: flex;

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

편집 : 단점은 평소와 같이 IE 뿐이며 IE9는 flex를 지원하지 않습니다. http://caniuse.com/flexbox

편집 2 : @toddsby가 지적했듯이 정렬 항목은 부모를위한 것이며 기본값은 stretch 입니다. child에 다른 값을 원하면 자체 정렬 속성이 있습니다.

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

실제로 부모 요소가있는 한 자녀의 키를 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클래스 가있는 각 요소가 부모 요소의 전체 높이를 차지하게됩니다.

나는 당신의 문제 를 해결 하는 예를 만들었습니다 .

래퍼를 만들고 플로팅 한 다음 div의 절대 위치를 지정하고 높이를 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에서 명시 적으로 선언 된 경우에만 너비 또는 높이와 상단 및 왼쪽 위치가 첫 번째 상위 div를 기준으로 절대 또는 상대 위치를 기준으로 계산됩니다. 명시 적으로 선언되지 않은 경우 해당 속성은 부모 컨테이너 (.right-wrapper)를 기준으로 계산됩니다.

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

이를 달성하는 가장 간단한 방법은 다음과 같습니다.

1. 세 요소의 컨테이너 (#outer) 표시를 설정하십시오. table
2. 그리고 요소 자체 (#inner) 표시를 설정하십시오 : table-cell
3. 플로팅을 제거하십시오.
4. 성공.

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

Floated div의 @Itay 덕분에 높이 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%;
}

오른쪽 : 및 왼쪽 :을 변경하여 원하는 #inner width를 설정하십시오.

flexbox를 사용하여 동일한 높이를 가진 여러 하위 요소가 필요한 경우와 비슷한 경우가 있습니다.

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

display: flex;부모 및 flex: 1;자식 요소에 대해 설정 하면 모두 같은 높이를 갖습니다.

시험

#outer{overflow: auto;}

추가 옵션 표시 : 부유 요소의 부모가 어떻게 접히지 않게합니까?