Bootstrap Twitter 3 dua kolom penuh

Saya mencoba membuat tata letak ketinggian dua kolom penuh dengan bootstrap twitter 3. Tampaknya twitter bootstrap 3 tidak mendukung tata letak tinggi penuh. Apa yang ingin saya lakukan:

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

Jika konten tumbuh, nav juga harus tumbuh.

• Tinggi 100% untuk setiap orang tua tidak berfungsi karena ada kasus di mana konten adalah satu baris.
• Posisi absolut sepertinya cara yang salah
• display: tabledan display:table-cellmemecahkan masalah, tetapi tidak elegan

html:

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

Apakah ada cara untuk membuatnya dengan kelas default twitter bootstrap 3 ?

Sunting: Di Bootstrap 4 , kelas asli dapat menghasilkan kolom dengan tinggi penuh ( DEMO ) karena mereka mengubah sistem kisi mereka menjadi flexbox. (Baca terus untuk Bootstrap 3)

Demo / Codepen bootply

Markup:

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

(Relevan) 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;
}

Kode di atas akan mencapai kolom ketinggian penuh (karena sifat tabel css khusus yang kami tambahkan) dan dengan rasio 1: 3 (Navigasi: Konten) untuk lebar layar menengah ke atas - (karena kelas default bootstrap: col-md -3 dan col-md-9)

NB:

1) Agar tidak mengacaukan kelas kolom asli bootstrap kami menambahkan kelas lain seperti no-floatdi markup dan hanya mengatur display:table-celldan float:nonepada kelas ini (seperti yang ditambahkan ke kelas kolom sendiri).

2) Jika kita hanya ingin menggunakan kode css-table untuk break-point tertentu (katakanlah lebar layar sedang dan di atas) tetapi untuk layar seluler kita ingin kembali ke perilaku bootstrap yang biasa daripada kita dapat membungkus CSS khusus kita dalam permintaan media, katakan:

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

Demo codepen

Sekarang, untuk layar yang lebih kecil, kolom akan berperilaku seperti kolom bootstrap default (masing-masing mendapatkan lebar penuh).

3) Jika rasio 1: 3 diperlukan untuk semua lebar layar - maka mungkin lebih baik untuk menghapus kelas col-md- * bootstrap dari markup karena itu bukan bagaimana mereka seharusnya digunakan.

Demo codepen

Anda dapat mencapai apa yang Anda inginkan dengan padding-bottom: 100%; margin-bottom: -100%;triknya, sudahkah Anda bisa melihatnya di biola ini .

Saya mengubah HTML Anda sedikit, tetapi Anda dapat mencapai hasil yang sama dengan HTML Anda sendiri dengan kode berikut

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

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

Solusi CSS murni

Biola yang Bekerja

Hanya menggunakan CSS2.1, Bekerja dengan semua browser (IE8 +), tanpa menentukan tinggi atau lebar.

Itu berarti bahwa jika tajuk Anda tiba-tiba bertambah panjang, atau navigasi kiri Anda perlu diperbesar, Anda tidak perlu memperbaiki apa pun di CSS Anda.

Benar-benar responsif, sederhana & jelas dan sangat mudah dikelola.

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

Penjelasan: Wadah itu divmengambil tinggi 100% dari tubuh, dan dia dibagi menjadi 2 bagian. Bagian header akan merentang ke ketinggian yang dibutuhkan, dan HeightTakerakan mengambil sisanya. Bagaimana itu dicapai? dengan mengapung elemen kosong di sepanjang sisi wadah dengan tinggi 100% (menggunakan :before), dan memberikan HeightTakerelemen kosong di akhir dengan aturan yang jelas (menggunakan:after ). elemen itu tidak bisa berada di garis yang sama dengan elemen melayang, jadi dia mendorong sampai akhir. tepatnya 100% dari dokumen.

Dengan itu kami membuat HeightTaker rentang sisa wadah tinggi, tanpa menyebutkan tinggi / margin tertentu.

di dalam itu HeightTakerkita membangun tata letak melayang normal (untuk mencapai tampilan kolom seperti) dengan perubahan kecil .. kita memiliki Wrapperelemen, yang diperlukan untuk100% ketinggian untuk bekerja.

Memperbarui

Inilah Demo dengan kelas Bootstrap. (Saya baru saja menambahkan satu div ke tata letak Anda)

Saya berpikir tentang perubahan halus, yang tidak mengubah perilaku bootstrap default. Dan saya bisa menggunakannya hanya ketika saya membutuhkannya:

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

jadi saya bisa menggunakannya seperti ini:

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

Sepengetahuan saya, Anda dapat menggunakan hingga 5 metode untuk mencapai ini:

1. Menggunakan tabel tampilan CSS / properti-sel tabel atau menggunakan tabel aktual.
2. Menggunakan elemen posisi absolut di dalam bungkus.
3. Menggunakan properti tampilan Flexbox tetapi, sampai hari ini, masih memiliki dukungan parsial
4. Mensimulasikan ketinggian kolom penuh dengan menggunakan teknik kolom palsu .
5. Menggunakan teknik padding / margin. Lihat contoh .

Bootstrap: Saya tidak punya banyak pengalaman dengan itu tetapi saya tidak berpikir mereka memberikan gaya untuk itu.

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

Solusi modern dan sangat sederhana:

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

Solusi CSS murni cukup mudah dan berfungsi seperti browser lintas pesona.

Anda cukup menambahkan padding besar dan margin negatif sama besar ke kolom nav dan konten, kemudian bungkus baris mereka di kelas dengan overflow tersembunyi.
Tampilan langsung
Edit tampilan

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

Semoga berhasil!

Solusinya dapat dicapai dengan dua cara

1. Menggunakan display: table dan display: table-cell
2. Menggunakan padding dan margin negatif.

Kelas-kelas yang digunakan untuk mendapatkan solusi di atas tidak disediakan di bootstrap 3. display: table and display: table-cell diberikan tetapi hanya saat menggunakan tabel dalam HTML. margin negatif dan kelas padding juga tidak ada.

Karenanya kita harus menggunakan custom css untuk mencapai ini.

Di bawah ini adalah solusi pertama

Kode 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 yang sesuai:

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

Di bawah ini adalah solusi kedua

Kode 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 yang sesuai:

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

Ok, saya telah mencapai hal yang sama menggunakan Bootstrap 3.0

Contoh dengan bootstrap terbaru

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

Jadi sepertinya pilihan terbaik Anda akan padding-bottomdilawan dengan margin-bottomstrategi negatif .

Saya membuat dua contoh. Satu dengan <header> di dalam .container , dan satu lagi di luar .

Kedua versi harus berfungsi dengan baik. Perhatikan penggunaan @mediakueri berikut ini sehingga menghapus bantalan ekstra pada layar yang lebih kecil ...

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

Selain itu, contoh-contoh itu harus memperbaiki masalah Anda.

ada cara yang jauh lebih mudah untuk melakukan ini jika yang Anda khawatirkan adalah meletakkan warna.

Letakkan ini pertama atau terakhir di tag tubuh Anda

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

dan ini di css Anda

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

Anda hanya membuat bentuk, menyematkannya di belakang halaman dan merentangkannya hingga ketinggian penuh. Dengan memanfaatkan kelas bootstrap yang ada, Anda akan mendapatkan lebar yang tepat dan itu akan tetap responsif.

Ada beberapa batasan dengan metode ini dari c, tetapi jika itu untuk struktur root halaman, itu adalah jawaban terbaik.

Saya menulis CSS sederhana yang kompatibel dengan Bootstrap untuk membuat tabel lebar dan tinggi penuh:

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

Prinsipnya adalah:

• tambahkan "tablefull" pada DIV utama
• maka secara implisit, DIV di bawah ini akan membuat baris
• dan kemudian DIV di bawah baris akan menjadi sel
• Anda bisa menggunakan class "tableheader" untuk header atau yang sejenis

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

mencoba

<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 untuk kelas .fill di bawah

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

}

Untuk referensi Anda lihat saja biola.

coba ini

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

Kunjungi http://www.sitepoint.com/building-responsif-website-using-twitter-bootstrap/

Terima kasih untuk Syed

Jika tidak akan ada konten setelah baris (seluruh layar diambil), trik menggunakan position: fixed; height: 100%untuk .col:beforeelemen dapat bekerja dengan baik:

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>

Ini tidak disebutkan di sini dengan penyeimbangan.

Anda dapat menggunakan posisi absolut untuk sidebar kiri.

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>

Coba ini

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

Ini menggunakan Bootstrap 3 sehingga tidak perlu untuk CSS tambahan dll ...

Pernahkah Anda melihat afiks bootstrap di bagian JAvascript ???

Saya pikir itu akan menjadi Bung solusi terbaik & termudah.

Lihat di sana: http://getbootstrap.com/javascript/#affix

Setelah bereksperimen dengan kode yang disediakan di sini: Tutorial Bootstrap

Berikut adalah alternatif lain menggunakan Bootstrap v3.0.2 terbaru :

Markup:

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

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

Contoh JSFiddle

Semoga ini bisa membantu siapa saja yang tertarik.