[html] 트위터 부트 스트랩 3 두 열 전체 높이

Html / 글쓴이

Twitter 부트 스트랩 3 을 사용하여 2 열 전체 높이 레이아웃 을 만들려고 합니다. Twitter 부트 스트랩 3 은 전체 높이 레이아웃을 지원하지 않는 것 같습니다 . 내가하고 싶은 것 :

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

콘텐츠가 커지면 탐색 기능도 커져야합니다.

  • 콘텐츠가 한 줄인 경우가 있으므로 모든 부모의 높이 100 %가 작동하지 않습니다.
  • 절대 위치가 잘못된 것 같습니다
  • display: table그리고 display:table-cell문제를 해결하지만 우아하지 않다

html :

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

기본 트위터 부트 스트랩 3 클래스 로 만들 수 있습니까?

답변

편집 :
에서 부트 스트랩 4 , 기본 클래스는 수 전체 높이 열 (생산 데모 가 변경 되었기 때문에) 자신의 그리드 시스템 인 flexbox에. (부트 스트랩 3에 대해 읽기)

기본 Bootstrap 3.0 클래스는 설명하는 레이아웃을 지원하지 않지만 CSS 테이블 을 사용하는 일부 사용자 정의 CSS를 통합 하여이를 수행 할 수 있습니다.

Bootply 데모 / 코드 펜

마크 업 :

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(관련) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

위의 코드는 전체 높이 열 (우리가 추가 한 사용자 정의 CSS 테이블 속성으로 인해)과 중간 화면 너비 및 그 이상에서 1 : 3 (탐색 : 내용) 비율 -(부트 스트랩의 기본 클래스로 인해 : col-md -3 및 col-md-9)

NB :

1) 부트 스트랩의 기본 열 클래스를 엉망으로 만들지 않기 위해 no-float마크 업과 같은 다른 클래스를 추가 하고이 클래스 display:table-cell와 float:none클래스 에만 설정 합니다 (열 클래스 자체에 적용됨).

2) 특정 중단 점 (예 : 중간 화면 너비 이상)에 CSS 테이블 코드 만 사용하고 싶지만 모바일 화면의 경우 사용자 정의 CSS를 래핑 할 수있는 것보다 일반적인 부트 스트랩 동작으로 다시 설정하려고합니다. 미디어 쿼리

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

코드 펜 데모

이제 더 작은 화면의 경우 열은 기본 부트 스트랩 열처럼 작동합니다 (각각은 전체 너비를 얻음).

3) 모든 화면 너비에 1 : 3 비율이 필요한 경우 마크 업에서 부트 스트랩의 col-md- * 클래스를 제거하는 것이 좋습니다. 왜냐하면 이것이 사용되는 방식이 아니기 때문입니다.

코드 펜 데모

답변

당신은 당신이 padding-bottom: 100%; margin-bottom: -100%;트릭으로 원하는 것을 얻을 수 있습니다 , 당신은 이 바이올린 에서 볼 수 있습니다 .

HTML을 약간 변경했지만 다음 코드를 사용하여 자신의 HTML로 동일한 결과를 얻을 수 있습니다.

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

답변

순수한 CSS 솔루션

일 바이올린

CSS2.1 만 사용하여 높이나 너비를 지정하지 않고 모든 브라우저 (IE8 +)로 작업하십시오 .

즉, 헤더가 갑자기 길어 지거나 왼쪽 탐색 기능을 확장해야하는 경우 CSS에서 아무것도 고칠 필요가 없습니다 .

반응이 빠르고 간단하며 명확하며 관리가 매우 쉽습니다.

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

설명 :
컨테이너의 div높이는 100 %이며 두 부분으로 나뉩니다. 헤더 섹션은 필요한 높이에 걸쳐 HeightTaker있으며 나머지는 나머지 부분을 차지합니다. 어떻게 달성됩니까? 빈 요소를 컨테이너 옆에 100 % 높이로 플로팅하고 (을 사용하여 :before), HeightTaker명확한 규칙을 사용하여 끝에 빈 요소를 제공합니다 (을 사용 :after). 해당 요소는 부동 요소와 같은 줄에있을 수 없으므로 끝까지 밀립니다. 정확히 문서의 100 %입니다.

이를 통해 HeightTaker특정 높이 / 여백을 지정하지 않고 나머지 컨테이너 높이를 스팬으로 만듭니다 .

그 안에는 HeightTaker약간의 변화만으로 일반 부동 레이아웃 (디스플레이와 같은 열을 달성하기 위해)을 만듭니다. 우리는 높이가 작동 Wrapper하는 데 필요한 요소 100%가 있습니다.

최신 정보

다음 은 부트 스트랩 클래스 가 있는 데모입니다. (방금 레이아웃에 하나의 div를 추가했습니다)

답변

기본 부트 스트랩 동작을 변경하지 않는 미묘한 변경에 대해 생각했습니다. 그리고 필요할 때만 사용할 수 있습니다.

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

그래서 나는 이것을 다음과 같이 사용할 수 있습니다 :

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

답변

내 지식으로는 이것을 달성하기 위해 최대 5 가지 방법을 사용할 수 있습니다.

  1. CSS 표시 테이블 / 테이블 셀 속성 사용 또는 실제 테이블 사용
  2. 래퍼 내부에 절대 위치 요소를 사용합니다.
  3. Flexbox 표시 속성을 사용하지만 현재는 여전히 부분적으로 지원합니다
  4. 가짜 열 기술 을 사용하여 전체 열 높이를 시뮬레이션하십시오 .
  5. 패딩 / 여백 기술 사용 예를 참조하십시오 .

부트 스트랩 : 나는 그것에 대해 많은 경험이 없지만 스타일을 제공한다고 생각하지 않습니다.

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

답변

현대적이고 매우 간단한 솔루션 :

HTML :

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

CSS :

.row{
    display: flex;
}

답변

순수한 CSS 솔루션은 충분히 쉽고 매력적인 크로스 브라우저처럼 작동합니다.

탐색 및 내용 열에 큰 패딩과 동등한 음의 여백을 추가 한 다음 오버플로가 숨겨진 클래스에서 행을 줄 바꿈하면됩니다.
라이브 뷰
편집 뷰

HTML 

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS 

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden;
}

행운을 빕니다!