부모를 기준으로 div를 100 % 높이로 만드는 방법은 무엇입니까?

아래와 같이 붙어 있습니다. 오른쪽 상단 div를 100 % 높이로 만들 필요가 있습니다. bgcolor는 기본 div의 전체 높이를 포함합니다.부모를 기준으로 div를 100 % 높이로 만드는 방법은 무엇입니까?

<body> 
    <div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;"> 
     <div id="left" style="float: left; width: 600px; background-color: #A7C864;"> 
      <div id="left-top">left-top</div> 
      <div id="left-bottom">left-bottom</div> 
     </div> 
     <div id="right" style="float: right; width: 200px; background-color: #C7E48E;"> 
      <div id="right-top">right-top</div> 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
</body>

여기 예를 들어 작업 : http://marioosh.net/lay1.html

이 쉽게 테이블을 사용 : http://marioosh.net/lay2.html

출처

2011-01-21 marioosh

심지어 이것을 시도해도 div의 모든 것을 이해하지 못할 수도 있습니다. div를 사용하지 않고 테이블을 사용하고 싶다면. div main의 높이를 div의 왼쪽 높이로 설정하면 div 오른쪽 100 %를 놓을 수는 있지만 div의 오른쪽 높이가 분명히 전송 될 수 있기 때문에 바보 같은 일이 발생합니다. – Myforwik

그럼 div가 무엇인지 말해 주시겠습니까? – marioosh

이것을 확인하십시오. 나는 그들이 도울 것이라고 확신한다. [question1] (http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-height) [질문 2] (http : //www.stackoverflow.com/questions/485827/css-100-height-with-padding-margin) – ayush

-2

당신은 100 % 높이를 사용하려면 부모 요소의 높이를 설정해야합니다. 둘 다 높이 100 %로 설정하면 찾고있는 효과를 얻을 수 있습니다.

출처

2011-01-21 08:51:02

메인 div의 높이가 100 % 인 – marioosh

질문을 오해 한 것일 수 있습니다 (예를 들어 테이블 기반 예제에 대한 링크가 작동하지 않음). 같은 높이로 두 개의 열을 만들려고합니다.

이

당신은 큰 바닥 패딩을 각 DIV 줄 수 있고, 똑같이 큰하지만 부정, 아래쪽 여백 : 당신이 사용할 수있는 여러 가지 방법이 있습니다, 여기에 세 가지입니다.
```
#main { 
    overflow: hidden; 
} 
#left, #right { 
    float: left; 
    padding-bottom: 1000em; 
    margin-bottom: -1000em; 
} 
```
이 솔루션은 문제가없는 것은 아닙니다. 열 중 하나에있는 요소에 id=foo이라는 요소가 있고 mypage.html#foo에 연결 한 경우처럼 레이아웃이 중단됩니다. 이 기술을 사용하여 아래쪽 테두리를 추가하는 것도 어렵습니다. 나탈리 Downe에서

전체 예 : http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
당신은 열 중 하나 부정적인 오른쪽 여백, 다른 매우 넓은 왼쪽 경계를 제공 할 수 있습니다. 스매싱 매거진에
```
#left, #right { 
    float: left; 
} 
#left { 
    background: red; 
    width: 200px; 
    margin-right: -200px; 
} 
#right { 
    border-left: 200px solid red; 
} 
```
더 많은 정보 : http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
할 수 있습니다 가짜 그것을 모두 열에 대한 배경을 포함하는 배경 이미지 #main를 제공함으로써. 이 기술은 "Faux Columns"로 알려져 있으며, 복잡한 배경 또는 컬럼 사이의 장식적인 경계를 원할 때 유용합니다. 떨어져 목록에

추가 정보 : 문제는 언급 http://www.alistapart.com/articles/fauxcolumns/

에 주석 하나로서, 당신은 또한 테이블을 사용할 수 있습니다. 그러나 표 형식의 데이터를 표시하지 않는 한 TABLE은 적절한 HTML 요소가 아닙니다.

출처

2012-02-05 20:26:16 georgebrock

은 필요하지 않습니다. div를 사용하여 이러한 모든 패딩/마진 해킹을 잘못 처리하면 우리는 "적절한"HTML 요소가 테이블을 사용하여 15 년 이상 해왔습니다. 이상한... – bfritz

부모를 기준으로 div를 100 % 높이로 만드는 방법은 무엇입니까?

답변

관련 문제