Div 높이 100 %가 작동하지 않음 - 부트 스트랩

격자 시스템에 부트 스트랩을 사용하고 있는데, 내부에 일부 텍스트를 세로로 정렬하기 위해 col-6의 높이를 100 %로 만드는 데 문제가 있습니다.Div 높이 100 %가 작동하지 않음 - 부트 스트랩

<div class="row"> 
    <div class="col-lg-6 col-sm-12 center "> 
     <img alt=" " class="img-responsive" src="assets/images/sitewide/mainpageeconomy.jpg"> 
    </div> 
    <div class="col-lg-6 col-sm-12 fillme"> 
     <p>We also offer a 30 foot Grady White center console. She's more of a hardcore no frills fishing vessel, we normally take her 20 to 40 miles offshore for bottom fishing and trolling for game fish up to 4 anglers.</p> 
    </div> 
</div>

fillme 클래스

도움이 많이 감사 높이 100 % 분의 높이를 갖는다.

업데이트 - 나는 이것에 대해 blog post을 썼습니다! 편리하게 사용할 수있는 훌륭한 코드입니다.

출처

2014-10-22 Mintberry

아래의 Lochemage의 대답은 정확합니다. '.fillme'을 부모의 높이로하고 싶다면 그 부모에 높이를 설정해야합니다. '.row {height : 500px;} '를 추가하면 그 부분을 해결할 수 있습니다. – cjspurgeon

당신은, 당신의 부모 행 '.fillme'클래스를주고이

.col-lg-6 {  
    width: 49% !important; 
    display: inline-block; 
    float: none !important; 
    vertical-align: middle;  
}

출처

2014-10-22 23:21:13

놀라운, 감사합니다! 편집 : 당신은 조금 그것을 설명 할 수 있습니까? 이것은 부트 스트랩에 내장 된 클래스 여야합니다! 잘 했어!! – Mintberry

.col-lg-6을 "대형 화면에서만"사용하는 것은 부끄러운 일입니다. 예를 들어, 클래스처럼 취급됩니다.) – Mintberry

디스플레이 인라인 블록 및 세로 정렬 중간에서는 둘 다 .col- 부모 안의 lg-6 div는 중간에 정렬됩니다. 부모의 높이는 높이가 더 큰 요소에서 가져오고, 이미지에서는 텍스트 div가 부모의 사용 가능한 공간에 세로로 정렬됩니다. 플로트 된 요소는 수직 정렬 될 수 없으므로 부트 스트랩에 의해 추가 된 부동 소수점을 제거합니다. –

요소에 할당 된 높이 또는 너비의 백분율은 전체 브라우저 창이 아닌 상위 요소의 크기 비율로 만 만듭니다. 상위 요소에 높이 또는 너비가 지정되어 있지 않으면 백분율 값을 가진 하위 요소는 아무 효과가 없습니다.

상위 div 요소에도 높이 값이 포함되어 있는지 확인하십시오.

편집 :

귀하의 경우에, 당신은 당신이 원하는 결과를 달성하기 위해 위치 마법을 사용할 수 있습니다

CSS :

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
    position: relative; 
} 

.fillmeright { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
} 

.fillmeleft { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
}

그냥 적절한 fillmeright 또는 fillmeleft으로 fillme 클래스를 교체 .

출처

2014-10-22 23:15:10 Lochemage

답변을 주셔서 감사합니다. 미디어 쿼리로 조정해야 할 높이를 설정하면 js/jquery를 사용하는 것이 더 낫겠습니까? – Mintberry

처럼 만들 COL-LG-6 클래스에서 제거하고이 같이 할 수 있습니다 :

.fillme{ 
    display: flex; 
    align-items: center; 
}

환호 , k

출처

2014-10-22 23:33:24

Div 높이 100 %가 작동하지 않음 - 부트 스트랩

답변

관련 문제