부트 스트랩 * 세로 * 부트 스트랩에 폭 관리를 위임하지 않고 응답

, 내가 얻을 수있는 세 가지 전체 높이 열 다음 HTML/CSS와부트 스트랩 * 세로 * 부트 스트랩에 폭 관리를 위임하지 않고 응답

<!DOCTYPE html> 
<head> 
    <style> 
     div { 
      position: fixed; 
      border: 5px dashed blue; 
      box-sizing: border-box; 
     } 
     .left { 
      height: 100%; top: 0; 
      width: 33%; left: 0; 
     } 
     .middle { 
      height: 100%; top: 0; 
      width: 33%; left: 33%; 
     } 
     .right { 
      height: 100%; top: 0; 
      width: 34%; left: 66%; 
     } 
     h2.text-center { 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <div class="left"> 
     <h2 class="text-center">Left</h2> 
    </div> 
    <div class="middle"> 
     <h2 class="text-center">Middle</h2> 
    </div> 
    <div class="right"> 
     <h2 class="text-center">Right</h2></div> 
    </div> 
</body>

는 부트 스트랩의 폭을 처리 할 수 있도록하기 위해, 나는 ( 1, 2, 3 4을)이 문제에 대한 부트 스트랩, 다른 이전 논의와 함께 작동하지 않습니다

<!DOCTYPE html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" 
     href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
    <style> 
     body { 
      min-height: 100%; 
      border: 3px solid green; 
     } 
     .fullheight { 
      min-height: 100%; 
      border: 3px solid blue; 
      /* position: absolute; */ 
     } 

    </style> 
</head> 
<body> 
    <div class="container-fluid fullheight"> 
     <div class="row fullheight"> 
      <div class="col-xs-4 col-md-4"> 
       <h2 class="text-center">Left</h2> 
      </div> 
      <div class="col-xs-4 col-md-4"> 
       <h2 class="text-center">Middle</h2> 
      </div> 
      <div class="col-xs-4 col-md-4"> 
       <h2 class="text-center">Right</h2> 
      </div> 
     </div> 
    </div> 
</body>

Switching position to absolute

을 썼다 도움이 안돼.

폭을 부트 스트랩으로 관리 할 때 높이를 100 %로 설정하는 방법은 무엇입니까?

DIV를 100 % 높이로 설정하는 부트 스트랩 방식이 있다면 더 좋을 것입니다.

출처

2016-08-30 Calaf

간단히 %' – Roberrrt

(100)의 의견을 기반으로 특성을 차치'가 부트 스트랩 클래스에'분 - height' 적용을 이 질문 - http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height –

@Roberrrt 위의 두 번째 코드에서'.fullheight' 클래스가 이미 수행합니다. 이. 무슨 뜻인지 자세히 설명해 주시겠습니까? – Calaf

폭을 부트 스트랩으로 관리 할 때 높이를 100 %로 설정하는 방법은 무엇입니까? 나는 내 친구 제임스를 인용거야

이 하나

라는 비교적 새로운 CSS3 측정 단위의 몇 가지가 있습니다

뷰포트 백분율 (또는 뷰포트 - 상대는) 길이.

https://stackoverflow.com/a/16837667/3305454

이 '뷰포트'단위는 무엇을해야합니까

일반적으로 100 %는 부모 요소를 기준으로하며, 100vh 또는 100vw는 초기 부모를 기준으로하지 않지만 사용자보기 영역 (즉, 정확한 화면)에만 집중합니다. (또한 제임스 도난) 예 :

<body style="height:100%"> 
    <div style="height:200px"> 
     <p style="height:100%; display:block;">Hello, world!</p> 
    </div> 
</body>

여기서 p 태그 100 % 높이로 설정되어 있지만, 그 함유 DIV는 200 픽셀 높이를 가지고 있기 때문에, 200 픽셀의 100 %의 100 %가 200 픽셀진다 몸 높이. 대신 100vh를 사용하면 p 태그가 div 높이에 관계없이 본문의 100 % 높이가됩니다.

귀하의 솔루션은 요소에이 CSS 규칙을 적용하는 것입니다 :

.left, .middle, .right { 
    min-height: 100vh; 
}

출처

2016-09-06 07:45:18 Roberrrt

아주 좋지만 완벽하지는 않습니다. 테두리 두께에 대해 3px를 20px로 바꾸면 프레임이 아래쪽으로 돌출되어 있음을 알 수 있습니다. 어떻게 맨 아래에 제대로 둥지를 틀 수 있습니까? – Calaf

calc (100vh - 40px)? :) – Roberrrt

아,이 일은 아직 안좋아. 그러나 : 상자 크기 : border-box; – Roberrrt

부트 스트랩 * 세로 * 부트 스트랩에 폭 관리를 위임하지 않고 응답

답변

관련 문제