부트 스트랩 3-열 내부 사용자 지정 div의 100 % 높이

부트 스트랩 3-열 내부 사용자 지정 div의 100 % 높이

---

행에 두 개의 열이 있다고 가정 해 보겠습니다.

하나는 class="img-responsive"유동적 이미지에 사용하는 이미지를 포함 하고 다른 열에는 사용자 지정 div 블록이 있습니다.

내 질문은이 사용자 지정 div의 높이를 100 % 얻는 방법입니다. 아래는 나를 위해 작동하지 않았습니다.

height: auto;
max-width: 100%;

높이에 고정 값을 설정하면 뷰포트 크기가 변경 될 때 이미지의 높이가 조정되므로 이미지가 포함 된 열에서 제대로 재생되지 않습니다.

이전 질문에서 제안한대로 다음과 같은 작업을 수행하여 열 높이를 동일하게 얻을 수 있습니다.

class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
.row {
    overflow: hidden; 
}

그러나 내 경우는 부모 div (열)가 아닌 이미지 높이와 동일한 높이를 설정하는 열 내부에서 사용자 정의 div를 사용해야한다는 점에서 약간 다릅니다.

여기 JS Fiddle입니다

---

원래 질문은 Bootstrap 3에 관한 것이며 IE8 및 9를 지원하므로 Flexbox가 최상의 옵션이 될 수 있지만 지원 부족으로 인해 내 답변의 일부가 아닙니다 .http : //caniuse.com/#feat=flexbox를 참조 하고 IE를 토글 하십시오 . 상자. 꽤 나쁘 죠?

2 가지 방법 :

1. 디스플레이 테이블 : 행을 display : table로 바꾸고 col- into display : table-cell로 돌아 다닐 수 있습니다. 그것은 테이블의 한계가 존재하지 않는 한 작동합니다. 그 한계 중에는 밀기 및 당기기 및 오프셋이 작동하지 않습니다. 게다가, 나는 당신이 이것을 사용하는 곳을 모릅니다. 어떤 중단 점에서. 이미지를 전체 너비로 만들고 다른 컨테이너 안에 포장하여 패딩을 넣어야합니다. 또한 모바일에서 디자인을 파악해야합니다. 이것은 768px 이상입니다. 이것을 사용할 때 나는 크기를 재 선언하고 때로는 테이블 내부의 콘텐츠 너비를 차지하므로 너비를 다시 선언하는 것이 도움이되기 때문에 크기를 다시 선언합니다. 당신은 놀아야 할 것입니다. 나는 또한 스크립트를 사용하지만 그것을 사용하기 위해 더 적은 파일을 변경해야하며 그렇지 않으면 응답으로 작동하지 않습니다.

---

데모 : http://jsbin.com/EtUBujI/2

  .row.table-row > [class*="col-"].custom {
    background-color: lightgrey;
    text-align: center;
  }


@media (min-width: 768px) {

  img.img-fluid {width:100%;}

  .row.table-row {display:table;width:100%;margin:0 auto;}

  .row.table-row > [class*="col-"] {
    float:none;
    float:none;
    display:table-cell;
    vertical-align:top;
  }

  .row.table-row > .col-sm-11 {
    width: 91.66666666666666%;
  }
  .row.table-row > .col-sm-10 {
    width: 83.33333333333334%;
  }
  .row.table-row > .col-sm-9 {
    width: 75%;
  }
  .row.table-row > .col-sm-8 {
    width: 66.66666666666666%;
  }
  .row.table-row > .col-sm-7 {
    width: 58.333333333333336%;
  }
  .row.table-row > .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666666666667%;
  }
  .col-sm-4 {
    width: 33.33333333333333%;
  }
  .row.table-row > .col-sm-3 {
    width: 25%;
  }
  .row.table-row > .col-sm-2 {
    width: 16.666666666666664%;
  }
  .row.table-row > .col-sm-1 {
    width: 8.333333333333332%;
  }


}

HTML

<div class="container">
    <div class="row table-row">
        <div class="col-sm-4 custom">
                100% height to make equal to ->
        </div>
        <div class="col-sm-8 image-col">
            <img src="http://placehold.it/600x400/B7AF90/FFFFFF&text=image+1" class="img-fluid">
        </div>
    </div>
</div>

---

2. 절대 bg div

데모 : http://jsbin.com/aVEsUmig/2/edit

위 및 아래 내용이있는 데모 : http://jsbin.com/aVEsUmig/3

---

.content {
        text-align: center;
        padding: 10px;
        background: #ccc;

}


@media (min-width:768px) { 
    .my-row {
        position: relative;
        height: 100%;
        border: 1px solid red;
        overflow: hidden;
    }
    .img-fluid {
        width: 100%
    }
    .row.my-row > [class*="col-"] {
        position: relative
    }
    .background {
        position: absolute;
        padding-top: 200%;
        left: 0;
        top: 0;
        width: 100%;
        background: #ccc;
    }
    .content {
        position: relative;
        z-index: 1;
        width: 100%;
        text-align: center;
        padding: 10px;
    }

}

HTML

<div class="container">

    <div class="row my-row">

        <div class="col-sm-6">

        <div class="content">
          This is inside a relative positioned z-index: 1 div
          </div>

         <div class="background"><!--empty bg-div--></div>
        </div>

        <div class="col-sm-6 image-col">
            <img src="http://placehold.it/200x400/777777/FFFFFF&text=image+1" class="img-fluid">
        </div>

    </div>

</div>

---

나는 단지 익숙한 문제를 찾고 있었는데 이것을 발견했습니다.

.div{
  height : 100vh;
}

더 많은 정보

vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side

---

높이를 정의하려는 요소의 모든 부모 요소의 높이를 설정해야합니다.

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        Make this division 100% height.
      </p>
    </div>
  </body>
</html>

조.

JsFiddle 예제

---

내 해결책은 모든 부모를 100 %로 만들고 각 행에 대해 특정 비율을 설정하는 것이 었습니다.

html, body,div[class^="container"] ,.column {
    height: 100%;
}

.row0 {height: 10%;}
.row1 {height: 40%;}
.row2 {height: 50%;}

참고 URL : https://stackoverflow.com/questions/20773342/bootstrap-3-100-height-of-custom-div-inside-column