HTML e CSS + Twitter Bootstrap: layout di pagina intera o altezza 100% - NPX

io sto cercando di fare seguente schema:HTML e CSS + Twitter Bootstrap: layout di pagina intera o altezza 100% - NPX

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

layout deve tenere a disposizione tutto altezza larghezza &, le colonne di navigazione e di contenuto occupano tutto lo spazio disponibile e scorrono in overflow, il piè di pagina dovrebbe rimanere in fondo.

HTML simile a questo ora:

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

In teoria dovrebbe funzionare, ma columns.margin non funziona come mi aspetto. Ho pensato che dovrebbe rendere altezza = 100% - magin, ma sposta semplicemente il contenitore.

Ho cercato su Google e ho visto numerose domande su StackOverflow. Tutti includono JavaScript o posizione: posizionamento assoluto e manuale. IMHO sono più hack che soluzioni, penso che ci dovrebbe essere un modo più semplice, più elegante e cross-browser per risolvere questo problema.

Quindi, come posso creare il layout sopra descritto? Forse Bootstrap può aiutarmi (ho esaminato la documentazione, ma non ci sono menzioni di casi come questo)?

fonte

2013-01-06 Daniel

Domanda ben formata. –

Ho trovato un post qui su StackOverflow e implementato il vostro disegno:

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

Ecco il post originale: https://stackoverflow.com/a/5768262/1368423

è quello che stai cercando?

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

fonte

2013-01-06 06:15:26 belens

Non ha funzionato :(http://jsfiddle.net/B9sMw/ - barra di scorrimento lì + qualche spaziatura strana sopra la barra di navigazione (vedi commenti, ho provato un paio di modi) – Daniel

Mi piacerebbe solo rendere la barra di navigazione assoluta. sappi che stai cercando di evitarlo, ma in questo caso è molto grazioso imho http://jsfiddle.net/B9sMw/1/ – belens

In effetti, Hm, ah lascia che sia :) Grazie per l'aiuto! – Daniel

E 'questo quello che stai cercando? Ecco un violino demo.

Il layout è basato sulla percentuale, i colori sono per chiarezza. Se la colonna del contenuto fuoriesce, dovrebbe apparire una barra di scorrimento.

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

fonte

2013-01-06 06:23:08 fbynite

che non funzionerà e questo è già visibile in jsfiddle: si dispone di barra di scorrimento perché l'altezza della barra di navigazione + altezza colonne (100%) + altezza del piè di pagina è> 100% – Daniel

So che è tardi, ma potrebbe aiutare qualcun altro!

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

fonte

2014-06-17 21:48:49

Non conoscevo calc! Il supporto del browser non è eccezionale ma funziona molto bene in chrome e firefox. – Johnride

se si utilizza Bootstrap 2.2.1, allora forse questo è quello che stai cercando.

Esempio di file 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>

file Descrizione/sito.css

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

fonte

2014-09-27 13:55:09

HTML e CSS + Twitter Bootstrap: layout di pagina intera o altezza 100% - NPX

risposta

Problemi correlati