Làm thế nào để có nhiều cột tiêu thụ 100% chiều cao bằng cách sử dụng twitter bootstrap?

Tôi đã thấy một số câu hỏi tương tự, nhưng chưa tìm thấy câu trả lời cho những gì tôi đang tìm kiếm. Thông tin bổ sung như sau:Làm thế nào để có nhiều cột tiêu thụ 100% chiều cao bằng cách sử dụng twitter bootstrap?

Tôi đang sử dụng twitter bootstrap, vì vậy tôi muốn một giải pháp đó là tương thích với nó
Cách bố trí sẽ xem xét like this. Rất tiếc, tôi không thể nhúng hình ảnh vì trước tiên tôi cần 10 điểm.
This gần như tôi đã nhận được cho đến thời điểm này. Vấn đề là tôi không thể có được thanh bên để dừng ở chân trang.
Tôi sẽ cần nội dung chính để mở rộng giống như thanh bên.
Thanh bên và Nội dung chính là hai màu khác nhau và có kích thước khác nhau. Cả hai đều phải kéo dài đến chân
ý rằng chiều cao tối thiểu phải là 100%
Các chân nên di chuyển nếu nội dung phát triển quá nhiều (tức là nó sẽ yêu cầu di chuyển để xem nó)
tôi làm không muốn để sử dụng JavaScript, nhưng nếu nó được yêu cầu tôi sẽ không nhớ một giải pháp với miễn là nó được tăng cường dần dần với JS (tôi cũng đang sử dụng jQuery).
Nội dung trang được căn giữa theo chiều ngang với chiều rộng cố định

Nguồn

2012-04-20 John Kholler

Tôi nghĩ rằng điều này có thể là, những gì bạn đang tìm kiếm: two column layout^source.

Ý tưởng chính là đặt height: 100% trên cả hai <body> và <html> và sau đó đảm bảo rằng vùng chứa cũng chiếm tất cả chiều cao (qua min-height: 100%). Bạn có thể nhận thấy rằng mã cũng chứa workaround cho IE6, bởi vì nó ban đầu được viết, khi chiến đấu IE6 chỉ là một ngày làm việc.

Điều này được thực hiện bằng cách sửa đổi phức tạp hơn một chút và thường được sử dụng hơn holy grail layout^source.

Nguồn

2012-04-20 04:59:56

Cảm ơn đây là những gì tôi đang tìm kiếm. Tôi không thể bỏ phiếu cho đến khi tôi có 15 danh tiếng nhưng tôi đã chỉ ra đây là câu trả lời đúng. –

Làm cách nào để trả lời câu hỏi "sử dụng twitter bootstrap"? – DGM

Tại sao lại có tác động? –

Thông qua css có thể có nhưng cần một số thủ thuật.

Bạn cần phải thực hiện cả hai divs/cột rất cao bằng cách thêm phần đệm dưới: 1000px và sau đó "lừa trình duyệt" vào suy nghĩ chúng không cao bằng margin-bottom: -1000px. Nó được giải thích tốt hơn thông qua ví dụ dưới đây.

http://jsfiddle.net/mediasoftpro/Ee7RS/

Hy vọng điều này sẽ ổn.

Nguồn

2012-04-20 03:12:24 irfanmcsd

Nhờ ví dụ. Tôi đã thấy một vài ví dụ sử dụng JavaScript, nhưng mạnh mẽ không muốn yêu cầu nó; bất kể, ví dụ được nhiều đánh giá cao. Bạn có biết liệu các yêu cầu của tôi có thể thực hiện được nếu không sử dụng JavaScript không? –

ok tôi đã cập nhật ví dụ và thực hiện nó qua css. – irfanmcsd

Hey tôi nghĩ rằng bạn muốn

Css này

.wraper, .header, .footer{ 
width:80%; 
    margin:0 auto; 
    overflow:hidden; 
    border:solid 2px red; 
} 
.header{ 
    height:100px; 
    background:green; 
    border-color:darkred; 
} 
.sidebar{ 
width:20%; 
    background:yellow; 
    float:left; 
} 
.content{ 
width:70%; 
    background:pink; 
    float:right; 
} 
.footer{ 
    height:100px; 
    background:blue; 
    border-color:black; 
} 
#container2 { 
background: none repeat scroll 0 0 #FFA7A7; 
clear: left; 
float: left; 
overflow: hidden; 
width: 100%; 
} 
#container1 { 
background: none repeat scroll 0 0 #FFF689; 
float: left; 
position: relative; 
right: 75%; 
width: 100%; 
} 
#sidebar { 
float: left; 
left:76%; 
overflow: hidden; 
position: relative; 
width: 20%; 
text-align: justify; 
} 
#content { 
    float: left; 
    left: 81%; 
    overflow: hidden; 
    position: relative; 
    text-align: justify; 
    width: 72%; 
}

** HTML

<div class="header">header bar </div> 
    <div class="wraper"> 
     <div id="container2"> 
    <div id="container1"> 
     <div id="sidebar"> 
      This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text 
     </div> 
     <div id="content"> 
      This is dummy text here This is dummy text here This is dummy 
     </div> 
    </div> 
</div> 
    </div> 
     <div class="footer">Footer bar</div>

sống bản demo http://jsfiddle.net/rohitazad/Pgy75/2/

thêm về điều này click here http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Nguồn

2012-04-20 05:07:59

Bạn có thể thử với display: table; đến Màn hình chính Div và : bảng ô; để Child Div để đạt được kết quả của bạn ....

xem mã: -

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    .container { 
    background:red; 
    width:600px; 
    display:table; 
    } 

    .left { 
    background:yellow; 
    width:200px; 
    display:table-cell; 

    } 


    .mid { 
    background:blue; 
    width:400px; 
    display:table-cell; 


    } 

     .right { 
    background:green; 
    width:200px; 
    display:table-cell; 

    } 



</style> 
</head> 
<body> 
    <div class="container"> 
    <div class="left">shailender</div> 
     <div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
     fff</div> 
     <div class="right">afdafaf</div> 


    </div> 
</body> 
</html>

Demo: -http://jsbin.com/ebucoz/13/edit

Nguồn

2012-04-20 07:06:34

Sử dụng Bootstrap ở đâu? (và 'float' attribut) – Georgio

Chỉ có thực sự trả lời:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<table border="1" height="100%" width="100%"> 
    <tr> 
     <td width="10%"> 
      left 
     </td> 
     <td> 
      right 
     </td> 
    </tr> 
</table>

Nguồn

2014-08-13 15:30:28 sproketboy

+1 Tôi có nên cười hay khóc? – bishop

Làm thế nào để có nhiều cột tiêu thụ 100% chiều cao bằng cách sử dụng twitter bootstrap?

Trả lời

Các vấn đề liên quan