Twitter bootstrap 3 hai cột chiều cao đầy đủ

Tôi đang cố gắng tạo bố cục toàn chiều cao hai cột bằng twitter bootstrap 3. Có vẻ như twitter bootstrap 3 không hỗ trợ bố cục chiều cao đầy đủ. Những gì tôi muốn làm:

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

Nếu nội dung phát triển, điều hướng cũng nên phát triển.

• Chiều cao 100% cho mỗi phụ huynh không hoạt động vì có trường hợp nội dung là một dòng.
• vị trí tuyệt đối dường như là sai cách
• display: tablevà display:table-cellgiải quyết vấn đề, nhưng nó không thanh lịch

html:

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

Có cách nào để làm cho nó với 3 lớp bootstrap mặc định của twitter không?

Chỉnh sửa: Trong Bootstrap 4 , các lớp gốc có thể tạo các cột có chiều cao đầy đủ ( DEMO ) vì chúng đã thay đổi hệ thống lưới của chúng thành flexbox. (Đọc tiếp cho Bootstrap 3)

Bootply demo / Codepen

Đánh dấu:

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

(Có liên quan) 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;
}

Đoạn mã trên sẽ đạt được các cột có chiều cao đầy đủ (do các thuộc tính bảng css tùy chỉnh mà chúng tôi đã thêm) và với tỷ lệ 1: 3 (Điều hướng: Nội dung) cho độ rộng màn hình trung bình trở lên - (do các lớp mặc định của bootstrap: col-md -3 và col-md-9)

Lưu ý:

1) Để không làm xáo trộn các lớp cột gốc của bootstrap, chúng tôi thêm một lớp khác như no-floattrong đánh dấu và chỉ được đặt display:table-cellvà float:nonetrên lớp này (như được gắn với chính các lớp cột).

2) Nếu chúng tôi chỉ muốn sử dụng mã bảng css cho một điểm dừng cụ thể (giả sử độ rộng màn hình trung bình trở lên) nhưng đối với màn hình di động, chúng tôi muốn mặc định quay lại hành vi bootstrap thông thường hơn là chúng tôi có thể bọc CSS tùy chỉnh của mình trong một truy vấn phương tiện truyền thông, nói:

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

Bản demo Codepen

Bây giờ, đối với các màn hình nhỏ hơn, các cột sẽ hoạt động giống như các cột bootstrap mặc định (mỗi cột có chiều rộng đầy đủ).

3) Nếu tỷ lệ 1: 3 là cần thiết cho tất cả các độ rộng màn hình - thì có lẽ tốt hơn là loại bỏ các lớp col-md- * của bootstrap khỏi đánh dấu vì đó không phải là cách chúng được sử dụng.

Bản demo Codepen

Bạn có thể đạt được những gì bạn muốn với padding-bottom: 100%; margin-bottom: -100%;thủ thuật, bạn có thể thấy trong câu đố này.

Tôi thay đổi HTML của bạn một chút, nhưng bạn có thể đạt được kết quả tương tự với HTML của riêng bạn với mã sau đây

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

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

Giải pháp CSS thuần túy

Fiddle làm việc

Chỉ sử dụng CSS2.1, Hoạt động với tất cả các trình duyệt (IE8 +) mà không chỉ định bất kỳ chiều cao hoặc chiều rộng nào.

Điều đó có nghĩa là nếu tiêu đề của bạn đột nhiên dài ra hoặc điều hướng bên trái của bạn cần phóng to, bạn không phải sửa bất cứ điều gì trong CSS của mình.

Hoàn toàn đáp ứng, đơn giản và rõ ràng và rất dễ quản lý.

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

Giải thích: Chiếc container divchiếm 100% chiều cao của cơ thể, và anh ta chia làm 2 phần. Phần tiêu đề sẽ mở rộng đến chiều cao cần thiết của nó và HeightTakerphần còn lại sẽ lấy phần còn lại. Làm thế nào nó đạt được? bằng cách thả một phần tử rỗng dọc theo cạnh chứa với 100% chiều cao (sử dụng :before) và đưa HeightTakerphần tử trống ở cuối với quy tắc rõ ràng (sử dụng :after). phần tử đó không thể nằm cùng dòng với phần tử nổi, vì vậy anh ta bị đẩy cho đến cuối cùng. đó chính xác là 100% của tài liệu.

Với điều đó, chúng tôi thực hiện HeightTakernhịp cho phần còn lại của chiều cao container, mà không nêu bất kỳ chiều cao / lề cụ thể nào.

bên trong HeightTakerchúng ta xây dựng một bố cục nổi thông thường (để đạt được cột như hiển thị) với một thay đổi nhỏ .. chúng ta có một Wrapperyếu tố, cần thiết cho 100%chiều cao để làm việc.

Cập nhật

Đây là bản Demo với các lớp Bootstrap. (Tôi vừa thêm một div vào bố cục của bạn)

Tôi đã nghĩ về một thay đổi tinh tế, không thay đổi hành vi bootstrap mặc định. Và tôi chỉ có thể sử dụng nó khi tôi cần:

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

vì vậy tôi có thể sử dụng nó như thế này:

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

Theo hiểu biết của tôi, bạn có thể sử dụng tối đa 5 phương pháp để thực hiện việc này:

1. Sử dụng các thuộc tính bảng / bảng hiển thị CSS hoặc sử dụng các bảng thực tế.
2. Sử dụng một yếu tố định vị tuyệt đối bên trong bọc.
3. Sử dụng thuộc tính hiển thị Flexbox nhưng cho đến ngày hôm nay, nó vẫn hỗ trợ một phần
4. Mô phỏng chiều cao cột đầy đủ bằng cách sử dụng kỹ thuật cột giả .
5. Sử dụng kỹ thuật đệm / lề. Xem ví dụ .

Bootstrap: Tôi không có nhiều kinh nghiệm với nó nhưng tôi không nghĩ họ cung cấp phong cách cho điều đó.

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

Giải pháp hiện đại và rất đơn giản:

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

Một giải pháp CSS thuần túy là đủ dễ dàng và nó hoạt động như một trình duyệt chéo quyến rũ.

Bạn chỉ cần thêm một phần đệm lớn và một lề âm lớn bằng nhau cho các cột điều hướng và nội dung, sau đó bọc hàng của chúng trong một lớp có ẩn tràn.
Xem trực tiếp
Chỉnh sửa chế độ xem

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

Chúc may mắn!

Giải pháp có thể đạt được theo hai cách

1. Sử dụng hiển thị: bảng và hiển thị: bảng-ô
2. Sử dụng phần đệm và lề âm.

Các lớp được sử dụng để có được giải pháp trên không được cung cấp trong bootstrap 3. display: table và display: cell-cell được đưa ra nhưng chỉ khi sử dụng các bảng trong HTML. biên âm và lớp đệm cũng không có.

Do đó chúng ta phải sử dụng css tùy chỉnh để đạt được điều này.

Dưới đây là giải pháp đầu tiên

Mã 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 tương ứng:

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

Dưới đây là giải pháp thứ hai

Mã 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 tương ứng:

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, tôi đã đạt được điều tương tự khi sử dụng Bootstrap 3.0

Ví dụ với bootstrap mới nhất

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

Vì vậy, có vẻ như lựa chọn tốt nhất của bạn là đi padding-bottomngược lại với margin-bottomchiến lược tiêu cực .

Tôi đã làm hai ví dụ. Một với <header> bên trong .container , và một với bên ngoài .

Cả hai phiên bản nên hoạt động đúng. Lưu ý việc sử dụng @mediatruy vấn sau để loại bỏ phần đệm thêm trên màn hình nhỏ hơn ...

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

Ngoài ra, những ví dụ đó sẽ khắc phục vấn đề của bạn.

có một cách dễ dàng hơn để làm điều này nếu tất cả những gì bạn quan tâm là đặt màu xuống.

Đặt cái này đầu tiên hoặc cuối cùng trong thẻ cơ thể của bạn

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

và điều này trong css của bạn

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

bạn chỉ cần tạo một hình dạng, ghim nó phía sau trang và kéo dài nó lên hết chiều cao. Bằng cách sử dụng các lớp bootstrap hiện có, bạn sẽ có được chiều rộng phù hợp và nó sẽ đáp ứng.

Có một số hạn chế với phương pháp này, nhưng nếu đó là cấu trúc gốc của trang, thì đó là câu trả lời tốt nhất.

Tôi đã viết một CSS đơn giản tương thích với Bootstrap để tạo các bảng chiều rộng và chiều cao đầy đủ:

Câu đố: https://jsfiddle.net/uasbfc5e/4/

Nguyên tắc là:

• thêm "bảng" trên một DIV chính
• sau đó ngầm, DIV bên dưới sẽ tạo các hàng
• và sau đó DIV bên dưới các hàng sẽ là các ô
• Bạn có thể sử dụng lớp "tiêu đề" cho các tiêu đề hoặc tương tự

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

thử

<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 cho lớp .fill bên dưới

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

}

Để tham khảo của bạn chỉ cần nhìn vào fiddle.

thử cái này

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

Truy cập http://www.sitepoint.com/building-responsive-websites-USE-twitter-bootstrap/

Cảm ơn Syed

Nếu có sẽ không có nội dung sau hàng (toàn bộ chiều cao màn hình được thực hiện), các trick với việc sử dụng position: fixed; height: 100%cho .col:beforecác yếu tố có thể làm việc tốt:

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>

Điều này đã không được đề cập ở đây với sự bù đắp.

Bạn có thể sử dụng tuyệt đối để định vị cho thanh bên trái.

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>

Thử cái này

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

Cái này sử dụng Bootstrap 3 nên không cần thêm CSS, v.v ...

Bạn đã thấy afix của bootstrap chưa trong phần của JAvascript chưa ???

Tôi nghĩ rằng nó sẽ là anh chàng giải pháp tốt nhất và dễ dàng nhất.

Có một cái nhìn ở đó: http://getbootstrap.com/javascript/#affix

Sau khi thử nghiệm với mã được cung cấp ở đây: Hướng dẫn Bootstrap

Đây là một cách khác để sử dụng Bootstrap mới nhất v3.0.2 :

Đánh dấu:

<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 bổ sung:

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

Mẫu JSFiddle

Hy vọng điều này sẽ giúp bất cứ ai quan tâm.