HTML & CSS + Twitter Bootstrap: pełny układ strony lub wysokość 100% - NPX

Próbuję zrobić następujący układ:HTML & CSS + Twitter Bootstrap: pełny układ strony lub wysokość 100% - NPX

+-------------------------------------------------+ 
    |  Header + search (Twitter navbar)   | 
    +------------+------------------------------------+ 
    |   |         | 
    |   |         | 
    |Navigation |   Content column    | 
    |   |         | 
    |   |         | 
    |   |         | 
    |   |         | 
    |   |         | 
    |   |         | 
    +------------+------------------------------------+ 
    |    Footer        | 
    +-------------------------------------------------+

Układ musi podjąć wszelkie dostępne wysokość & szerokość, kolumny nawigacji i zawartości zajmują całą dostępną przestrzeń i przewijaj nadmiar, stopka powinna trzymać się dołu.

HTML wygląda to teraz:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Bootstrap 101 Template</title> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> 
    <link href="css/app.css" rel="stylesheet" media="screen"> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/app.js"></script> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <div class="navbar"> 
     <!-- navbar content --> 
     </div> 

     <div class="row-fluid columns"> 
     <div class="span2 article-tree"> 
      <!-- navigation column --> 
     </div> 
     <div class="span10 content-area"> 
      <!-- content column --> 
     </div> 
     </div> 

     <div class="footer"> 
     <!-- footer content --> 
     </div> 
    </div> 
    </body> 
</html>

CSS:



body, html, .container-fluid { /// take all available height 
    height: 100%; 
} 

.article-tree { 
    color: #DCE6E5; 
    background: #2F323B; 
} 

.content-area { 
    overflow: auto; 
    height: 100%; /// explicit height to make scrolling work 
} 

.columns { 
    height: 100%; /// columns should take all height 
    margin-top: 42px; /// minus header 
    margin-bottom: 20px; // minus footer 
} 

.columns > div { 
    height: 100%; // make each column to take all available height 
} 

.footer { 
    background: red; 
    height: 20px; 
}

W teorii to powinno działać, ale columns.margin nie działa jak oczekuję. Myślałem, że powinien on stanowić wysokość = 100% - magin, ale po prostu przesuwa pojemnik.

Mam googled i widziałem wiele pytań na temat StackOverflow. Wszystkie zawierają JavaScript lub pozycję: pozycjonowanie bezwzględne i ręczne. IMHO są bardziej hackami niż rozwiązaniami, myślę, że powinien istnieć prostszy i bardziej elegancki i oparty na przeglądarkach sposób rozwiązania tego problemu.

Jak zatem zrobić układ opisany powyżej? Może Bootstrap może mi pomóc (przejrzałem dokumentację, ale nie ma wzmianek o takich przypadkach)?

Źródło

2013-01-06 Daniel

Dobrze sformułowane pytanie. –

Znalazłem post tutaj na Stackoverflow i wdrożone swój projekt:

http://jsfiddle.net/bKsad/25/

Oto oryginalny post: https://stackoverflow.com/a/5768262/1368423

Czy tego szukasz?

HTML:

<div class="container-fluid wrapper"> 

    <div class="row-fluid columns content"> 

    <div class="span2 article-tree"> 
     navigation column 
    </div> 

    <div class="span10 content-area"> 
     content column 
    </div> 
    </div> 

    <div class="footer"> 
    footer content 
    </div> 
</div>

CSS:

html, body { 
    height: 100%; 
} 
.container-fluid { 
    margin: 0 auto; 
    height: 100%; 
    padding: 20px 0; 

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.columns { 
    background-color: #C9E6FF; 
    height: 100%; 
} 

.content-area, .article-tree{ 
    background: #bada55; 
    overflow:auto; 
    height: 100%; 
} 

.footer { 
    background: red; 
    height: 20px; 
}

Źródło

2013-01-06 06:15:26 belens

Nie wyszło :(http://jsfiddle.net/B9sMw/ - pasek przewijania tam + dziwne odstępy nad navbarem (zobacz komentarze, próbowałem kilka sposobów) – Daniel

Po prostu ustawię navbar absolutnie. wiesz, że próbujesz tego uniknąć, ale w tym przypadku jest to całkiem zgrabne: http://jsfiddle.net/B9sMw/1/ – belens

To jest rzeczywiście. Hm, ah pozwól mu być :) Dziękuję za pomoc! – Daniel

Czy tego szukasz? Oto skrzypce demo.

Układ jest oparty na wartości procentowej, kolory są dla jasności. Jeśli kolumna zawartości zostanie przepełniona, powinien pojawić się pasek przewijania.

body, html, .container-fluid { 
    height: 100%; 
} 

.navbar { 
    width:100%; 
    background:yellow; 
} 

.article-tree { 
    height:100%; 
    width: 25%; 
    float:left; 
    background: pink; 
} 

.content-area { 
    overflow: auto; 
    height: 100%; 
    background:orange; 
} 

.footer { 
    background: red; 
    width:100%; 
    height: 20px; 
}

Źródło

2013-01-06 06:23:08 fbynite

które nie zadziała i to już widać w jsfiddle: masz pasek przewijania, ponieważ wysokość kolumny + wysokość kolumn (100%) + wysokość stopki jest> 100% – Daniel

Wiem, że jest późno, ale może pomóc komuś innemu!

body,html { 
    height: 100%; 
} 

.contentarea { 

/* 
    * replace 160px with the sum of height of all other divs 
    * inc padding, margins etc 
    */ 
    min-height: calc(100% - 160px); 
}

Źródło

2014-06-17 21:48:49

Nie wiesz o calc! Obsługa przeglądarki nie jest świetna, ale działa bardzo dobrze w chrome i firefox. – Johnride

jeśli używasz Bootstrap 2.2.1, to być może to jest to, czego szukasz.

Przykładowy plik index.html

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="Content/Site.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <menu> 
 
     <div class="navbar navbar-default navbar-fixed-top"> 
 
      <div class="container"> 
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
        <a class="navbar-brand" href="/">Application name</a> 
 
       </div> 
 
       <div class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav"> 
 
         <li><a href="/">Home</a></li> 
 
         <li><a href="/Home/About">About</a></li> 
 
         <li><a href="/Home/Contact">Contact</a></li> 
 
        </ul> 
 
        <ul class="nav navbar-nav navbar-right"> 
 
         <li><a href="/Account/Register" id="registerLink">Register</a></li> 
 
         <li><a href="/Account/Login" id="loginLink">Log in</a></li> 
 
        </ul> 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
    </menu> 
 

 
    <nav> 
 
     <div class="col-md-2"> 
 
      <a href="#" class="btn btn-block btn-info">Some Menu</a> 
 
      <a href="#" class="btn btn-block btn-info">Some Menu</a> 
 
      <a href="#" class="btn btn-block btn-info">Some Menu</a> 
 
      <a href="#" class="btn btn-block btn-info">Some Menu</a> 
 
     </div> 
 

 
    </nav> 
 
    <content> 
 
     <div class="col-md-10"> 
 

 
       <h2>About.</h2> 
 
       <h3>Your application description page.</h3> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <p>Use this area to provide additional information.</p> 
 
       <hr /> 
 
     </div> 
 
    </content> 
 

 
    <footer> 
 
     <div class="navbar navbar-default navbar-fixed-bottom"> 
 
      <div class="container" style="font-size: .8em"> 
 
       <p class="navbar-text"> 
 
        &copy; Some info 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </footer> 
 

 
</body> 
 
</html>

zawartość pliku/strony.css

body { 
 
    padding-bottom: 70px; 
 
    padding-top: 70px; 
 
}

Źródło

2014-09-27 13:55:09

HTML & CSS + Twitter Bootstrap: pełny układ strony lub wysokość 100% - NPX

Odpowiedz

Powiązane problemy