Twitter bootstrap 3 iki sütun tam boy

Ben twitter bootstrap 3 ile iki sütunlu tam yükseklik düzeni yapmaya çalışıyorum. Twitter bootstrap 3 tam yükseklik düzenleri desteklemiyor gibi görünüyor . Yapmak istediğim şey:

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

İçerik büyürse, nav da büyümelidir.

• Yükseklik Her ebeveyn için% 100 çalışmaz, çünkü içeriğin bir satır olduğu durum vardır.
• mutlak pozisyon yanlış görünüyor
• display: tableve display:table-cellsorunu çözmek, ama zarif değil

html:

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

Varsayılan twitter bootstrap 3 sınıflarıyla yapmanın bir yolu var mı ?

Düzenleme: içinde Bootstrap 4 , doğal sınıfları için tam boy kolonları (üretmek GÖSTERI değişmiş için) bunların ızgara sistemi flexbox'a. (Bootstrap 3 için okumaya devam edin)

Önyükleme demosu / Codepen

İşaretleme:

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

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

Yukarıdaki kod, tam ekran sütunlar (eklediğimiz özel css-tablo özellikleri nedeniyle) ve orta ekran genişlikleri ve üstü için 1: 3 (Gezinme: İçerik) - (bootstrap'in varsayılan sınıfları nedeniyle: col-md) elde edecek -3 ve sütun-md-9)

NB:

1) amacıyla değil biz gibi başka sınıf eklemek Bootstrap doğal sütun sınıflarına kadar uğraşmak no-floatişaretlemesinde ve sadece set display:table-cellve float:nonesütun sınıfların kendilerini) apposed (Bu sınıfta.

2) css-table kodunu yalnızca belirli bir kırılma noktası (orta ekran genişlikleri ve üstü gibi) için kullanmak istiyorsak, ancak mobil ekranlar için, özel CSS'imizi bir medya sorgusu, deyin:

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

Codepen demosu

Şimdi, daha küçük ekranlar için, sütunlar varsayılan önyükleme sütunları gibi davranır (her biri tam genişliğe sahip olur).

3) Tüm ekran genişlikleri için 1: 3 oranı gerekiyorsa - bootstrap'ın col-md- * sınıflarını biçimlendirmeden kaldırmak daha iyidir, çünkü bunların kullanılması amaçlanmamıştır.

Codepen demosu

padding-bottom: 100%; margin-bottom: -100%;Hile ile istediğinizi elde edebilirsiniz, bu kemanda görebiliyor musunuz .

HTML'nizi biraz değiştiriyorum, ancak aşağıdaki sonucu kullanarak kendi HTML'nizle aynı sonucu elde edebilirsiniz

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

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

Saf CSS çözümü

Çalışma keman

Yalnızca CSS2.1 kullanarak, herhangi bir yükseklik veya genişlik belirtmeden tüm tarayıcılarla (IE8 +) çalışın .

Bu, başlığınız aniden uzarsa veya sol gezinme bölgenizin büyütülmesi gerekiyorsa , CSS'nizdeki hiçbir şeyi düzeltmeniz gerekmediği anlamına gelir .

Tamamen duyarlı, basit ve net ve yönetimi çok kolay.

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

Açıklama: Konteyner divvücudun% 100 yüksekliğini alır ve 2 bölüme ayrılır. Üstbilgi bölümü gereken yüksekliğe HeightTakerkadar uzanır ve geri kalan kısmı alır. Nasıl başarılır? boş bir elemanı kabın yan tarafında% 100 yükseklikte (kullanarak :before) yüzer HeightTakerve sonunda boş bir elemanı açık kuralla vererek (kullanarak :after). bu eleman kayan elemanla aynı çizgide olamaz, bu yüzden sonuna kadar itilir. tam olarak belgenin% 100'üdür.

Bununla, HeightTakerbelirli bir yükseklik / marj belirtmeden , açıklığı konteyner yüksekliğinin geri kalanını yaparız .

bunun içinde HeightTakerküçük bir değişiklikle normal bir kayan düzen (sütun gibi görüntü elde etmek için) oluşturuyoruz .. yüksekliğin çalışması Wrapperiçin gereken bir elementimiz var 100%.

Güncelleme

İşte Bootstrap sınıflarıyla Demo. (Düzeninize yeni bir div ekledim)

Varsayılan önyükleme davranışını değiştirmeyen ince bir değişiklik düşündüm. Ve sadece ihtiyacım olduğunda kullanabilirim:

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

böylece böyle kullanmak olabilir:

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

Bildiğim kadarıyla bunu gerçekleştirmek için en fazla 5 yöntem kullanabilirsiniz:

1. CSS görüntüleme tablosu / tablo hücresi özelliklerini kullanma veya gerçek tabloları kullanma.
2. Sargı içinde mutlak konumlandırılmış bir eleman kullanarak.
3. Flexbox display özelliğini kullanarak ancak bugün itibariyle hala kısmi desteği var
4. Sahte sütun tekniğini kullanarak tam sütun yüksekliklerini simüle edin .
5. Dolgu / kenar boşluğu tekniğini kullanma. Örneğe bakın .

Bootstrap: Bununla ilgili fazla deneyimim yok ama bunun için stil sağladıklarını düşünmüyorum.

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

Modern ve çok basit bir çözüm:

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

Saf bir CSS çözümü yeterince kolaydır ve bir çekici çapraz tarayıcı gibi çalışır.

Gezinme ve içerik sütunlarına büyük bir dolgu ve eşit derecede büyük bir kenar boşluğu ekledikten sonra satırlarını taşma gizlenmiş bir sınıfa sarın.
Canlı görüntü Görünümü
düzenle

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

İyi şanslar!

Çözüm iki yolla elde edilebilir

1. Display: table ve display: table-cell kullanma
2. Dolgu ve negatif kenar boşluğu kullanma.

Yukarıdaki çözümü elde etmek için kullanılan sınıflar bootstrap 3'te sağlanmamıştır. Display: table and display: table-cell, yalnızca HTML'de tablolar kullanıldığında verilir. negatif marj ve dolgu sınıfları da yoktur.

Bu nedenle, bunu başarmak için özel css kullanmalıyız.

İlk çözüm aşağıdadır

HTML Kodu:

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

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

Aşağıdakiler ikinci çözümdür

HTML Kodu:

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

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

Tamam, Bootstrap 3.0 kullanarak da aynı şeyi başardım

En son bootstrap örneği

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

Görünüşe göre en iyi seçeneğiniz padding-bottomnegatif margin-bottomstratejinin tersine gidiyor .

İki örnek verdim. Biri <header> içeride .container , diğeri dışarıda .

Her iki sürüm de düzgün çalışmalıdır. @mediaDaha küçük ekranlardaki fazla dolguyu kaldırabilmek için aşağıdaki sorgunun kullanılmasına dikkat edin ...

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

Bunun dışında, bu örnekler sorununuzu çözmelidir.

endişelendiğiniz tek şey rengi bırakıyorsa bunu yapmanın çok daha kolay bir yolu var.

Bunu vücut etiketinize önce veya son olarak yerleştirin

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

ve bu senin css

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

sadece bir şekil oluşturuyor, onu sayfanın arkasına sabitliyor ve tam yüksekliğe uzatıyorsunuz. Mevcut bootstrap sınıflarını kullanarak doğru genişliği elde edersiniz ve duyarlı kalır.

Bu ofc yöntemiyle ilgili bazı sınırlamalar vardır, ancak sayfanın kök yapısı içinse, en iyi yanıt budur.

Tam genişlik ve yükseklik tabloları oluşturmak için Bootstrap ile uyumlu basit bir CSS yazdım:

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

İlke:

• ana tabloya "tablefull" ı ekleyin
• ardından örtük olarak, aşağıdaki DIV satırlar oluşturur
• ve sonra satırların altındaki DIV hücreler olacak
• Üstbilgiler veya benzerleri için "tableheader" sınıfını kullanabilirsiniz

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

Deneyin

<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 sınıfı için css aşağıda

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

}

Referans için sadece keman bakmak .

bunu dene

 <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/ adresini ziyaret edin.

Syed sayesinde

Satırdan sonra içerik olmayacaksa (tüm ekran yüksekliği alınır), position: fixed; height: 100%for .col:beforeöğesini kullanma hilesi iyi çalışabilir:

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>

Bu, ofsetleme ile burada bahsedilmedi.

Sol kenar çubuğunu konumlandırmak için mutlak kullanabilirsiniz.

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>

Bunu dene

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

Bu Bootstrap 3 kullanır, bu yüzden ekstra CSS vb.

Bootstrap'ın afikini gördün mü JAvascript'in bölümünde ??

En iyi ve en kolay çözüm ahbap olacağını düşünüyorum.

Şuraya bir göz atın: http://getbootstrap.com/javascript/#affix

Burada sağlanan kodu denedikten sonra: Bootstrap Eğitimi

İşte en son Bootstrap v3.0.2 kullanan başka bir alternatif :

İşaretleme:

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

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

Örnek JSFiddle

Umarım bu ilgilenen herkese yardımcı olur.