Twitter bootstrap 3 dwie kolumny pełna wysokość

Możesz osiągnąć to, co chcesz za pomocą padding-bottom: 100%; margin-bottom: -100%; triku, który możesz zobaczyć w tym Skrzypku.

Zmieniam trochę Twój HTML, ale możesz osiągnąć ten sam wynik za pomocą własnego HTML za pomocą następującego kodu

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

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

Pure CSS solution

Working Fiddle

Używając tylko CSS2.1, Działa ze wszystkimi przeglądarkami (IE8+), bez podawania wysokości lub szerokości.

Oznacza to, że jeśli nagłówek nagle wydłuży się lub lewa nawigacja musi się powiększyć, nie musisz naprawiać niczego w CSS.

Całkowicie responsywny, prosty i przejrzysty oraz bardzo łatwy w zarządzaniu.

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

Wyjaśnienie: Pojemnik div bierze 100% wysokości ciała i dzieli się na 2 sekcje. Sekcja nagłówka rozciągnie się do wymaganej wysokości, a HeightTaker zajmie resztę. Jak to osiągnąć? poprzez unoszenie pustego elementu wzdłuż boku kontenera o 100% wysokości (za pomocą :before) i podanie HeightTaker pustego elementu na końcu z regułą clear (za pomocą :after). ten element nie może być w tej samej linii z pływającym elementem, więc jest wciśnięty do końca. czyli dokładnie 100% dokumentu.

With that we Ustaw HeightTaker na pozostałej części wysokości kontenera, bez podawania konkretnej wysokości/ marginesu.

Wewnątrz HeightTaker budujemy normalny układ pływający (aby osiągnąć kolumnę jak wyświetlacz) z drobną zmianą.. mamy element Wrapper, który jest potrzebny do pracy na wysokości 100%.

Update

Oto Demo z klasami Bootstrap. (Właśnie dodałem jeden div do twojego layoutu)

Myślałem o subtelnej zmianie, która nie zmienia domyślnego zachowania bootstrap. I mogę go używać tylko wtedy, gdy tego potrzebowałem:

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

Więc mogę go użyć w ten sposób:

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

Według mojej wiedzy możesz użyć do 5 metod, aby to osiągnąć:

1. używając CSS Wyświetlaj właściwości tabel / table-cell lub używając tabel rzeczywistych.
2. Użycie bezwzględnego elementu umieszczonego wewnątrz owijarki.
3. przy użyciu właściwości flexbox display, ale na dzień dzisiejszy nadal ma częściowe wsparcie
4. Symuluj pełne wysokości kolumn za pomocą techniki faux column .
5. używając techniki padding / margin. Zobacz przykład .

Bootstrap: nie mam z tym dużego doświadczenia, ale nie sądzę, aby zapewniały do tego style.

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

Rozwiązanie można uzyskać na dwa sposoby

1. użycie display:table I display: table-cell
2. używając paddingu i ujemnego marginesu.

Klasy, które są używane do uzyskania powyższego rozwiązania, nie są podane w bootstrap 3. display: table oraz display: table-cell są podane, ale tylko podczas używania tabel w HTML. nie ma również klas ujemnego marginesu i padding.

Dlatego musimy użyć niestandardowego css, aby to osiągnąć.

Poniżej znajduje się pierwszy rozwiązanie

Kod 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>

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

Poniżej znajduje się drugie rozwiązanie

Kod 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>

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

Czyste rozwiązanie CSS jest wystarczająco łatwe i działa jak charm cross browser.

Po prostu dodajesz Duże wypełnienie i równie duży ujemny margines do kolumn nav I content, a następnie owijasz ich wiersz w klasę z ukrytym przepełnieniem.
widok na żywo
Edytuj Widok

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

Ok, osiągnąłem to samo używając Bootstrap 3.0

Przykład z najnowszym bootstrap

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

Więc wydaje się, że najlepszym wyjściem będzie strategia padding-bottom przeciwstawiana negatywnej margin-bottom.

Obie wersje powinny działać poprawnie. Zwróć uwagę na użycie następującego zapytania @media, aby usunęło ono dodatkowe wypełnienie na mniejszych ekranach...

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

Poza tym, te przykłady powinny rozwiązać twój problem.

Jest o wiele łatwiejszy sposób, jeśli martwisz się tylko o ułożenie koloru.

Umieść to jako pierwsze lub ostatnie w znaczniku ciała

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

I to w Twoim css

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

Po prostu tworzysz kształt, przypinasz go za stronę i rozciągasz do pełnej wysokości. Korzystając z istniejących klas bootstrap, uzyskasz odpowiednią szerokość i pozostanie ona responsywna.

Istnieją pewne ograniczenia z tą metodą ofc, ale jeśli jest to dla struktura strony, to najlepsza odpowiedź.

Napisałem prosty CSS zgodny z Bootstrap do tworzenia tabel o pełnej szerokości i wysokości:

Fiddle : https://jsfiddle.net/uasbfc5e/4/

Zasada brzmi:

• dodaj "tablefull" na głównym DIV
• następnie domyślnie, DIV poniżej utworzy wiersze
• a następnie DIV pod wierszami będą komórki
• możesz użyć klasy "tableheader" dla nagłówków lub podobnych

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

Try

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

Css dla .Klasa wypełnienia znajduje się poniżej

 .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%;

}

W celach informacyjnych po prostu spójrz na skrzypce.

Spróbuj tego

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

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

Thanks to Syed

Jeśli po wierszu nie będzie zawartości (pobierana jest wysokość całego ekranu), sztuczka z użyciem elementu position: fixed; height: 100% dla elementu .col:before może zadziałać dobrze:

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>

Nie wspomniano o tym tutaj z kompensacją.

Możesz użyć opcji absolute, aby ustawić pozycję na lewym pasku bocznym.

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>

Spróbuj tego

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

Używa Bootstrap 3, więc nie ma potrzeby stosowania dodatkowych CSS itp...

Czy widziałeś the bootstrap ' s afix w sekcji JAvascript ???

Myślę, że byłoby to najlepsze i najłatwiejsze rozwiązanie koleś.

Zobacz też: http://getbootstrap.com/javascript/#affix

Po eksperymentowaniu z kodem podanym tutaj: Bootstrap Tutorial

Oto kolejna alternatywa dla najnowszego Bootstrap v3. 0. 2:

Znaczniki:

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

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

Próbka JSFiddle