부모의 키를 지정하지 않고 자식 div를 부모의 div 높이의 100 %로 강제 설정하는 방법은 무엇입니까?

다음 구조의 사이트가 있습니다.

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

탐색은 왼쪽에 있고 컨텐츠 div는 오른쪽에 있습니다. content div에 대한 정보는 PHP를 통해 가져 오므로 매번 다릅니다.

어떤 페이지가로드 되더라도 내비게이션을 세로 방향으로 조정하여 높이가 콘텐츠 div의 높이와 같도록하려면 어떻게해야합니까?

참고 :이 답변은 Flexbox 표준을 지원하지 않는 레거시 브라우저에 적용됩니다. 현대적인 접근 방식은 https://stackoverflow.com/a/23300532/1155721을 참조하십시오.

Cross-Browser CSS 및 No Hacks가 있는 Equal Height Columns를 살펴 보는 것이 좋습니다 .

기본적으로 브라우저와 호환되는 방식으로 CSS를 사용 하여이 작업을 수행하는 것은 사소한 것이 아니라 테이블이있는 사소한 것이 아니므로 적절한 사전 패키지 솔루션을 찾으십시오.

또한 100 % 높이 또는 동일한 높이를 원하는지에 따라 답이 달라집니다. 보통 같은 높이입니다. 높이가 100 %이면 답이 약간 다릅니다.

부모의 경우 :

display: flex;

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

편집 : @Adam Garner가 지적했듯이 항목을 정렬하십시오 : stretch; 필요하지 않습니다. 사용법은 자녀가 아닌 부모를위한 것입니다. 스트레칭하는 어린이를 정의하려면 자기 정렬을 사용합니다.

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

이것은 항상 디자이너와 함께 다루는 실망스러운 문제입니다. 트릭은 CSS의 BODY 및 HTML에서 높이를 100 %로 설정해야한다는 것입니다.

html,body {
    height:100%;
}

이 의미없는 코드는 브라우저에 100 %의 의미를 정의하는 것입니다. 답답하지만, 가장 간단한 방법입니다.

두 열을 display: table-cell;대신 설정하는 것이 좋습니다 float: left;.

예기치 않게 짧은 콘텐츠 div가 발생하는 경우 탐색 div가 잘리지 않는 경우 적어도 하나의 쉬운 방법이 있습니다.

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

그렇지 않으면 가짜 열 기술이 있습니다.

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

jQuery를 사용하여 :

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

아래쪽 여백을 100 %로 만들어보십시오.

margin-bottom: 100%;

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

봐 예 .

height : <percent>최상위 수준에서 픽셀, ems 등으로 고정 된 높이로 지정된 백분율 높이를 가진 모든 부모 노드가있는 경우에만 작동합니다. 이렇게하면 높이가 요소까지 계단식으로 내려갑니다.

@Travis가 앞에서 언급 한대로 페이지 높이를 노드에 계단식으로 표시하도록 html 및 body 요소에 100 %를 지정할 수 있습니다.

오랫동안 검색하고 시도한 후에는 아무것도 제외하고 문제를 해결하지 못했습니다.

style = "height:100%;"

어린이 사업부

부모님은 이것을 적용하십시오

.parent {
    display: flex;
    flex-direction: column;
}

또한, 나는 부트 스트랩을 사용하고 있으며 이것은 나를 위해 반응을 손상시키지 않았습니다.

이 기사 에서 설명한 방법에 따라 .Less dynamic solution을 만들었습니다.

HTML :

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

적게:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

display: grid부모에게 추가

나는 질문이 만들어진 이후로 오랜 시간이 걸렸다는 것을 알고 있지만 쉬운 해결책을 찾았고 누군가가 그것을 사용할 수 있다고 생각했습니다 (불쌍한 영어에 대해 죄송합니다). 여기 간다:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

간단한 예입니다. 반응 형으로 전환 할 수 있습니다.

내 해결책 :

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

질문의 제목과 내용에 약간의 모순이 있습니다. 제목은 부모 div에 대해 말하지만 문제는 두 형제 div (탐색 및 내용)가 동일한 높이를 원하는 것처럼 들립니다.

(a) 내비게이션과 콘텐츠가 기본 높이의 100 %가되게 하시겠습니까, (b) 내비게이션과 콘텐츠가 같은 높이가 되길 원하십니까?

(b) ... 그렇다면 현재 페이지 구조 (적어도 순수한 CSS가 아니고 스크립팅이 아님)를 감안할 때 그렇게 할 수 없다고 생각합니다. 아마도 다음과 같은 작업을 수행해야 할 것입니다.

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

탐색 창의 너비에 관계없이 content div가 왼쪽 여백을 갖도록 설정하십시오. 이렇게하면 컨텐츠의 컨텐츠가 탐색 오른쪽에 있으며 탐색 div를 컨텐츠 높이의 100 %로 설정할 수 있습니다.

편집 : 나는 이것을 내 머리에서 완전히하고 있지만 탐색 div의 왼쪽 여백을 음수 값으로 설정하거나 맨 왼쪽으로 다시 밀려면 절대 왼쪽을 0으로 설정해야 할 것입니다. 문제는 이것을 풀 수있는 많은 방법이 있지만 모든 브라우저와 호환되는 것은 아닙니다.

[또 다른 답변에서 Dmity의 Less 코드 참조] 이것이 일종의 "의사 코드"라고 생각합니다.

내가 이해 한 것에서 트릭을 수행 해야하는 가짜 열 기술을 사용해보십시오.

http://www.alistapart.com/articles/fauxcolumns/

도움이 되었기를 바랍니다 :)

이 트릭은 효과가 있습니다. clear : both 스타일로 HTML 섹션에 최종 요소 추가;

    <div style="clear:both;"></div>

그 이전의 모든 것이 높이에 포함됩니다.

position: absolute;아이 에게주는 것은 내 경우에 일했다

CSS Flexbox를 사용합니다

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

CSS에 구현 된 CSS flexbox 및 grid 이후이 답변은 더 이상 이상적이지 않습니다. 그러나 여전히 작동하는 솔루션입니다

더 작은 화면에서는 col1, col2 및 col3이 서로 쌓여있을 때 높이를 자동으로 유지하려고합니다.

그러나 미디어 쿼리 중단 점 후에는 모든 열에 대해 동일한 높이로 cols가 나란히 나타나기를 원합니다.

1125 px는 모든 열을 동일한 높이로 설정 한 후 창 너비 중단 점의 예일뿐입니다.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

물론 필요한 경우 더 많은 중단 점을 설정할 수 있습니다.

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

나는이 같은 문제가 Hakam Fostok의 답변에 따라 일했다, 나는 어떤 경우에는 추가하지 않고도 작동 할 수 있습니다, 작은 예제를 만들었습니다 display: flex;및 flex-direction: column;부모 컨테이너에

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

앞에서 설명한 것처럼 flexbox가 가장 쉽습니다. 예.

#main{ display: flex; align-items:center;}

그러면 모든 하위 요소가 상위 요소 내의 중심에 맞춰집니다.

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

에서:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

부트 스트랩 상태이지만 이것을 사용하기 위해 부트 스트랩이 필요하지 않습니다. 이 오래된 질문에 대답하면 이것이 효과가 있었고 구현하기가 쉽습니다.

이것은 내가이 질문에 제공 한 것과 같은 대답이었습니다

position: absolute콘텐츠 컨테이너와 position: relative상위 컨테이너를 기반으로 한 오래된 패션 데모 입니다.

현대적인 방법 은 플렉스 박스 가 가장 좋습니다.

가장 쉬운 방법은 가짜 일뿐입니다. A List Apart는 2004 년 Dan Cederholm의이 기사 에서처럼 수년에 걸쳐 광범위하게 다루어 졌습니다 .

내가 보통하는 방법은 다음과 같습니다.

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

# 컨테이너를 다른 div에 배치하고 헤더 div를 # 컨테이너의 형제로 임베드하고 여백 및 너비 스타일을 상위 컨테이너로 이동하면이 디자인에 헤더를 쉽게 추가 할 수 있습니다. 또한 CSS는 별도의 파일로 이동하고 인라인 등으로 유지하지 않아야합니다. 마지막으로 clearfix 클래스는 positioniseverything 에서 찾을 수 있습니다 .