Twitter bootstrap 3 สองคอลัมน์เต็มความสูง

ฉันกำลังพยายามสร้างเลย์เอาต์เต็มความสูงสองคอลัมน์ด้วย twitter bootstrap 3 ดูเหมือนว่าtwitter bootstrap 3ไม่รองรับเลย์เอาต์ความสูงเต็ม สิ่งที่ฉันต้องการจะทำ:

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

หากเนื้อหาเติบโตขึ้น nav ก็ควรเติบโตเช่นกัน

• ความสูง 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>

มีวิธีที่จะทำให้มันมีค่าเริ่มต้นที่bootstrap 3ชั้นเรียน?

แก้ไข: ในBootstrap 4คลาสเนทีฟสามารถสร้างคอลัมน์เต็มความสูง ( DEMO ) ได้เนื่องจากพวกเขาเปลี่ยนระบบกริดเป็น flexbox (อ่านต่อสำหรับ Bootstrap 3)

ตัวอย่างการสาธิต / Codepen

มาร์กอัป:

<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-table แบบกำหนดเองที่เราเพิ่ม) และอัตราส่วน 1: 3 (การนำทาง: เนื้อหา) สำหรับความกว้างหน้าจอขนาดกลางขึ้นไป - (เนื่องจากคลาสเริ่มต้นของ bootstrap: col-md -3 และ col-md-9)

หมายเหตุ:

1)เพื่อไม่ให้สับสนกับคลาสเนทีฟคอลัมน์พื้นเมืองของ bootstrap เราเพิ่มคลาสอื่นเช่นno-floatในมาร์กอัพและตั้งค่าเฉพาะdisplay:table-cellและfloat:noneในคลาสนี้

2)ถ้าเราเพียงต้องการใช้รหัส css-table สำหรับจุดพักที่เฉพาะเจาะจง (พูดความกว้างหน้าจอขนาดกลางขึ้นไป) แต่สำหรับหน้าจอมือถือเราต้องการเริ่มต้นกลับไปที่พฤติกรรมการบูตปกติมากกว่าที่เราสามารถห่อ CSS ที่กำหนดเองภายใน แบบสอบถามสื่อพูดว่า:

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

การสาธิต Codepen

ตอนนี้สำหรับหน้าจอขนาดเล็กคอลัมน์จะทำงานเหมือนคอลัมน์บูตสแตรปเริ่มต้น (แต่ละรายการมีความกว้างเต็ม)

3)ถ้าต้องการอัตราส่วน 1: 3 สำหรับความกว้างของหน้าจอทั้งหมด - อาจเป็นการดีกว่าที่จะลบคลาส col-md- * ของ bootstrap ออกจากมาร์กอัปเนื่องจากไม่ใช่วิธีการใช้งาน

การสาธิต Codepen

คุณสามารถบรรลุสิ่งที่คุณต้องการด้วยpadding-bottom: 100%; margin-bottom: -100%;เคล็ดลับที่มีคุณสามารถเห็นในนี้ซอ

ฉันเปลี่ยน HTML เล็กน้อย แต่คุณสามารถได้ผลลัพธ์เดียวกันกับ HTML ของคุณเองด้วยรหัสต่อไปนี้

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

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

โซลูชัน CSS เพียว

Fiddle ทำงาน

ใช้ 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% และเขาแบ่งออกเป็น 2 ส่วน ส่วนหัวจะขยายไปตามความสูงที่ต้องการและHeightTakerจะหยุดพัก มันประสบความสำเร็จได้อย่างไร? โดยการลอยองค์ประกอบที่ว่างเปล่าไว้ข้างๆคอนเทนเนอร์ด้วยความสูง 100% (โดยใช้:before) และให้HeightTakerองค์ประกอบที่ว่างเปล่าท้ายกฎที่ชัดเจน (โดยใช้:after) องค์ประกอบนั้นไม่สามารถอยู่ในแนวเดียวกันกับองค์ประกอบที่ลอยดังนั้นเขาจึงผลักจนจบ ซึ่งตรงกับเอกสารทั้งหมด 100%

ด้วยการที่เราทำการHeightTakerขยายช่วงระยะเวลาที่เหลือของความสูงของคอนเทนเนอร์โดยไม่ระบุความสูง / ระยะขอบเฉพาะใด ๆ

ภายในที่HeightTakerเราสร้างเค้าโครงลอยปกติ (เพื่อให้บรรลุคอลัมน์เช่นการแสดงผล) ด้วยการเปลี่ยนแปลงเล็กน้อย .. เรามีWrapperองค์ประกอบที่จำเป็นสำหรับ100%ความสูงในการทำงาน

ปรับปรุง

นี่คือการสาธิตด้วยคลาส Bootstrap (ฉันเพิ่งเพิ่มหนึ่ง 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. การใช้เทคนิค padding / margin ดูตัวอย่าง

Bootstrap: ฉันไม่ได้มีประสบการณ์มากมายกับมัน แต่ฉันไม่คิดว่าพวกเขามีสไตล์สำหรับสิ่งนั้น

.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 บริสุทธิ์นั้นง่ายพอและใช้งานได้เหมือนเบราว์เซอร์ charm cross

คุณเพียงเพิ่มช่องว่างขนาดใหญ่และระยะขอบเชิงลบที่มีขนาดใหญ่เท่ากันในคอลัมน์ nav และเนื้อหาจากนั้นล้อมแถวของพวกเขาในชั้นเรียนด้วยการซ่อนล้น
มุมมองสด
แก้ไขมุมมอง

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. การใช้จอแสดงผล: ตารางและจอแสดงผล: ตารางเซลล์
2. ใช้ช่องว่างภายในและระยะขอบลบ

คลาสที่ใช้เพื่อขอรับโซลูชันข้างต้นไม่ได้จัดเตรียมไว้ใน bootstrap 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

ตัวอย่างกับ 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>

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

คุณเพียงแค่สร้างรูปร่างปักหมุดไว้ด้านหลังของหน้าและยืดให้เต็มความสูง ด้วยการใช้คลาส bootstrap ที่มีอยู่คุณจะได้ความกว้างที่ถูกต้องและจะตอบสนองได้ตลอดเวลา

มีข้อ จำกัด บางอย่างเกี่ยวกับวิธีการนี้ แต่ถ้าเป็นโครงสร้างรูทของหน้ามันเป็นคำตอบที่ดีที่สุด

ฉันเขียน CSS ง่าย ๆ ที่เข้ากันได้กับ Bootstrap เพื่อสร้างตารางเต็มความกว้างและความสูง:

ซอ: https://jsfiddle.net/uasbfc5e/4/

หลักการคือ:

• เพิ่ม "tablefull" บน DIV หลัก
• จากนั้นโดยนัย 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>

css สำหรับ. กรอก class อยู่ด้านล่าง

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

สิ่งนี้ใช้ Bootstrap 3 ดังนั้นไม่จำเป็นต้องใช้ CSS พิเศษเพิ่มเติม ...

คุณเคยเห็นส่วนท้ายของ bootstrap ไหม ในส่วนของ 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

หวังว่านี่จะช่วยให้ทุกคนที่สนใจ