Jak mieć wiele kolumn, które zużywają 100% wysokości za pomocą twitter bootstrap?

Widziałem wiele podobnych pytań, ale nie znalazłem odpowiedzi na to, czego szukam. Więcej informacji można uzyskać w następujący sposób:Jak mieć wiele kolumn, które zużywają 100% wysokości za pomocą twitter bootstrap?

Używam twitter bootstrap, więc chciałbym rozwiązanie, które jest z nim zgodne
Układ będzie wyglądać like this. Niestety nie mogę umieścić obrazu, ponieważ potrzebuję 10 punktów.
This jest tak blisko, jak do tej pory. Problem polega na tym, że nie mogę dostać paska bocznego, aby zatrzymać stopę.
Potrzebuję głównej zawartości, aby rozwinąć to samo co pasek boczny.
Pasek boczny i treść główna mają dwa różne kolory i różnią się rozmiarem. Muszą zarówno przedłużyć do stopki
Zauważ, że minimalna wysokość musi wynosić 100%
Stopka powinien poruszać jeśli zawartość rośnie zbyt dużo (tzn wymagałoby to przewijanie, żeby go zobaczyć)
zrobić nie chcą używaj JavaScriptu, ale jeśli jest to wymagane, nie miałbym nic przeciwko rozwiązaniu tak długo, jak jest ono stopniowo ulepszane za pomocą JS (używam również jQuery).
Zawartość strona skupia się poziomo o stałej szerokości

Źródło

2012-04-20 John Kholler

Myślę, że to może być to, czego szukasz: two column layout^source.

Główną ideą jest stworzenie height: 100% zarówno <body> i <html> a następnie upewnij się, że pojemnik również zajmuje całą wysokość (przez min-height: 100%). Możesz zauważyć, że ten kod zawiera także obejście IE6, ponieważ zostało pierwotnie napisane, gdy walka z IE6 była tylko kolejnym dniem pracy.

Dokonano tego, modyfikując nieco bardziej skomplikowany i częściej używany holy grail layout^source.

Źródło

2012-04-20 04:59:56

Dzięki temu właśnie tego szukałem. Nie mogę głosować w górę, dopóki nie będę miał 15 punktów reputacji, ale wskazałem, że to była poprawna odpowiedź. –

Jak ta odpowiedź brzmi "używanie twitter bootstrap"? – DGM

Dlaczego miałoby to jakiś wpływ? –

Via css może być możliwe, ale trzeba kilka sztuczek.

Musisz zrobić, aby oba kolumny/kolumny były bardzo wysokie, dodając dopełnienie-dno: 1000px, a następnie "oszukuj przeglądarkę", myśląc, że nie są one wysokie przy użyciu marginesowego dołu: -1000px. Lepiej wyjaśnić to za pomocą poniższego przykładu.

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

nadzieję, że będzie w porządku.

Źródło

2012-04-20 03:12:24 irfanmcsd

Dzięki za przykład. Widziałem kilka przykładów, które używają JavaScript, ale zdecydowanie wolę tego nie wymagać; niezależnie, przykład jest bardzo doceniany. Czy wiesz, czy moje wymagania są możliwe bez używania JavaScript? –

ok, zaktualizowałem przykład i zrobiłem to przez css. – irfanmcsd

Hej Myślę, że chcesz to

CSS

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

demo żywo http://jsfiddle.net/rohitazad/Pgy75/2/

więcej o tym click here http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Źródło

2012-04-20 05:07:59

Można spróbować z wyświetlaczu: Stół; do Div Div Jednostka i display: table-cell; do Child Div dla osiągnięcia swoich wyników ....

zobaczyć kod: -

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

Źródło

2012-04-20 07:06:34

Gdzie jest użycie Bootstrap? (i "float" attribut) – Georgio

Jedynym odpowiedź:

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

Źródło

2014-08-13 15:30:28 sproketboy

+1 Czy powinienem się śmiać, czy płakać? – bishop

Jak mieć wiele kolumn, które zużywają 100% wysokości za pomocą twitter bootstrap?

Odpowiedz

Powiązane problemy