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

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에 대해 읽기)

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; 
}  

행운을 빕니다!

이 솔루션은 두 가지 방법으로 달성 될 수 있습니다

1. display : table 및 display : table-cell 사용
2. 패딩 및 음수 여백 사용.

위의 솔루션을 얻는 데 사용되는 클래스는 부트 스트랩 3에서 제공되지 않습니다. display : table 및 display : table-cell은 HTML에서 테이블을 사용할 때만 제공됩니다. 음수 여백 및 패딩 클래스도 없습니다.

따라서 우리는 이것을 달성하기 위해 커스텀 CSS를 사용해야합니다.

아래는 첫 번째 해결책입니다

HTML 코드 :

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

해당 CSS :

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

아래는 두 번째 해결책입니다

HTML 코드 :

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

해당 CSS :

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

좋아, Bootstrap 3.0을 사용하여 동일한 결과를 얻었습니다.

최신 부트 스트랩이있는 예

http://jsfiddle.net/HDNQS/1/

HTML :

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

SCSS :

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

따라서 최선의 선택은 padding-bottom부정적인 margin-bottom전략으로 반박 하는 것 같습니다 .

나는 두 가지 예를 만들었습니다. 하나는 <header> 내부 .container 가 있고 다른 하나는 외부가 있습니다.

두 버전 모두 제대로 작동합니다. @media작은 화면에서 추가 패딩을 제거하도록 다음 쿼리를 사용하십시오 .

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

그 이외의 예는 문제를 해결해야합니다.

당신이 걱정하는 모든 색상을 내려 놓는 경우이 작업을 수행하는 훨씬 쉬운 방법이 있습니다.

이것을 바디 태그의 첫 번째 또는 마지막에 넣으십시오.

<div id="nfc" class="col col-md-2"></div>

그리고 이것은 당신의 CSS에서

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

모양을 만들어 페이지 뒤에 고정하고 전체 높이로 늘리기 만하면됩니다. 기존 부트 스트랩 클래스를 사용하면 올바른 너비를 얻을 수 있으며 응답 속도를 유지할 수 있습니다.

이 방법 ofc에는 몇 가지 제한 사항이 있지만 페이지의 루트 구조에 대한 것이 가장 좋습니다.

전체 너비 및 높이 테이블을 만들기 위해 Bootstrap과 호환되는 간단한 CSS를 작성했습니다.

피들 : https://jsfiddle.net/uasbfc5e/4/

원칙은 다음과 같습니다.

• 메인 DIV에 "tablefull"추가
• 암시 적으로 아래의 DIV는 행을 만듭니다.
• 그런 다음 행 아래의 DIV는 셀입니다.
• 헤더 또는 이와 유사한 클래스에 "tableheader"클래스를 사용할 수 있습니다.

HTML :

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

CSS :

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

시험

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

.fill 클래스의 CSS는 다음과 같습니다.

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

참고로 바이올린을 살펴보십시오 .

이 시도

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/ 방문

Syed 덕분에

행 이후에 내용 (전체 화면 높이가 촬영) 사용과 트릭이 없을 경우 position: fixed; height: 100%를 위해 .col:before잘 작동 할 수 있습니다 요소 :

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

오프셋으로 여기에 언급되지 않았습니다.

앱솔루트를 사용하여 왼쪽 사이드 바의 위치를 ​​지정할 수 있습니다.

CSS

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

HTML

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

이 시도

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

이것은 부트 스트랩 3을 사용하므로 추가 CSS 등이 필요하지 않습니다 ...

JAvascript의 섹션에서 부트 스트랩의 수정 사항 을 보셨습니까?

나는 그것이 가장 좋고 쉬운 솔루션 친구라고 생각합니다.

거기를보십시오 : http://getbootstrap.com/javascript/#affix

여기에 제공된 코드를 실험 한 후 : Bootstrap Tutorial

최신 Bootstrap v3.0.2를 사용하는 또 다른 대안은 다음과 같습니다 .

마크 업 :

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

추가 CSS :

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

샘플 JSFiddle

이것이 관심있는 사람에게 도움이되기를 바랍니다.