самозагрузки 3: 3 строки палки сверху и снизу

Извините за мой плохой английскийсамозагрузки 3: 3 строки палки сверху и снизу

Я изучал самозагрузки и попытаться закодировать расположение, как этот enter image description here

Серая часть является окно браузера.

Ряд 0 должен придерживаться сверху (например, панели навигации)
Ряд 2 должны держаться на день (как сноска)
Ряд 1 является динамической высотой зависит от высоты окна браузера.

как представить их через CSS?

<div class="container"> 
     <div class="row clearfix"> 
      <div class="col-md-12 column"> 
      </div> 
     </div> 
     <div class="row clearfix"> 
      <div class="col-md-5 column"> 
      </div> 
      <div class="col-md-2 column"> 
      </div> 
      <div class="col-md-5 column"> 
      </div> 
     </div> 
     <div class="row clearfix"> 
      <div class="col-md-12 column"> 
      </div> 
     </div> 
    </div>

источник

2014-01-11 user2520217

использование Попробуйте этот код:

<html> 
    <head> 
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script data-require="[email protected]*" data-semver="3.1.1" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    <style> 
     p{text-align: center;} 
     html, body{height:100%;} 
     #content{ 
     min-height:100%; 
     height:auto !important; 
     height:100%; 
     /* Negative indent header and footer by its height */ 
     margin:-80px auto -60px; 
     /* Pad bottom by header and footer height */ 
     padding:80px 0 60px; 
     } 
     /* Set the fixed height of the header here */ 
     #header{height:80px;} 
     /* Set the fixed height of the footer here */ 
     #footer{height:60px;} 
    </style> 
    </head> 

    <body> 
    <div id="header"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"><p>header</p></div> 
     </div> 
     </div> 
    </div> 

    <div id="content"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-5"><p>left column</p></div> 
      <div class="col-xs-2"><p>center column</p></div> 
      <div class="col-xs-5"><p>right column</p></div> 
     </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"><p>footer</p></div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

источник

2014-01-11 16:41:31 mcmac

это не похоже на работу: http://plnkr.co/edit/QTvkqEZy08o74mOcIzRI?p=preview – Kyle

Спасибо! работал как шарм –

Это отличный ответ, и это было очень полезно. – Rav

самозагрузки 3: 3 строки палки сверху и снизу

ответ

Смежные вопросы