如何使列伸展來填充容器div（雖然是響應）

Question

我正在使用Twitter Bootstrap（最新版本 - 2.3.2）爲我正在建設的網站，並且希望在保持網站的同時實現以下功能反應迅速，併爲其應用最佳實踐。

這裏是什麼，我希望有一個非常粗略的草圖：

該網站有固定的導航欄一個基本報頭，內容流體DIV有三個內部的div：一個span5，span6 ，span1（共12列）。在內容div之後，有公司/版權信息等的粘性頁腳。

我遇到的問題是與span1列。它基本上是裝飾性的（它有4條垂直彩條，每條寬度爲25％），但我想要：

• 垂直居中的社交鏈接圖標（Twitter，Facebook，LinkedIn，等等），如黑匣子所示。
• 文字在每個彩條內逆時針旋轉90度。這只是一個字，而不是優先事項。
• 由於頁面高度當前由最高的div設置，因此無論是span5還是span6，每個小節伸展以填充父容器的全部高度（本例中爲內容div）。

我知道有可能很多方法來實現這一目標（純CSS，JavaScript中，背景圖片平鋪），但是我正在尋找最好的做法：避免額外的標記，使用正確的技術，以儘可能地學習。我已經嘗試設置父容器（和內部酒吧）的高度：100％;並以最小高度進行比賽，但最小高度似乎沒有（似乎）與百分比一起工作。

任何幫助和/或建設性的批評是非常受歡迎的。

編輯：的jsfiddle和全程式碼：JSFiddle

此外，鏈接到原始網站（在案件的jsfiddle螺絲的東西了）：Original page

<!-- Part 1: Wrap all page content here --> 
<div id="wrap"> 
    <!-- Fixed navbar --> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 

       </button> <a class="brand" href="#">Geolog&iacute;a y Telecomunicaciones, C.A.</a> 

       <div class="nav-collapse collapse"> 
        <ul class="nav"> 
         <li><a href="#">Inicio</a> 

         </li> 
         <li><a href="#acerca-de">Acerca de</a> 

         </li> 
         <li class="active"><a href="#contacto">Contacto</a> 

         </li> 
        </ul> 
       </div> 
       <!--/.nav-collapse --> 
      </div> 
     </div> 
     <div> 
      <div class="decorative-lightblue"></div> 
      <div class="decorative-purple"></div> 
      <div class="decorative-orange"></div> 
      <div class="decorative-lightorange"></div> 
     </div> 
    </div> 
    <!-- Begin page content --> 
    <div class="container-fluid"> 
     <div class="row-fluid content clearfix" style="margin-top: 60px;"> 
      <div class="span5"> 
       <div class="row-fluid"> 
        <div class="span5"> 
         <div class="span12 logo"></div> 
         <div class="sidebar-intro">Construcci&oacute;n, Adaptaci&oacute;n, 
          <br/>Adecuaci&oacute;n y Remodelaci&oacute;n 
          <br/>de <span class="emphasis-red"> 
             locales<br>comerciales<br>empresariales 
            </span> 

         </div> 
        </div> 
        <div class="span7"> 
         <!-- Responsive iFrame --> 
         <div class="Flexible-container"> 
          <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=8.561755,-71.204721&amp;spn=0.004716,0.006571&amp;t=m&amp;z=18&amp;output=embed"></iframe> 
          <br /><small><a href="http://maps.google.com/?ie=UTF8&amp;ll=8.561755,-71.204721&amp;spn=0.004716,0.006571&amp;t=m&amp;z=18&amp;source=embed" style="color:#0000FF;text-align:left">Ver mapa m&aacute;s grande</a></small> 

         </div> 
        </div> 
       </div> 
       <div class="row-fluid"> 
        <div class="contact-wrapper well"> 
         <form> 
          <div class="control-group"> 
           <label class="control-label" for="inputName"><i class="icon-user"></i> Nombre</label> 
           <div class="controls controls-row"> 
            <input type="text" class="span12 input-xlarge " id="inputName" placeholder="Su nombre completo"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="inputEmail"><i class="icon-envelope"></i> Correo electr&oacute;nico</label> 
           <div class="controls"> 
            <input type="text" class="span12 input-xlarge" id="inputEmail" placeholder="nombre@sudominio.com"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="inputEmail"><i class="icon-question-sign"></i> Asunto</label> 
           <div class="controls"> 
            <input type="text" class="span12 input-xlarge" id="inputSubject" placeholder="Asunto de su mensaje"> 
           </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label" for="inputEmail"><i class="icon-pencil"></i> Mensaje</label> 
           <div class="controls"> 
            <textarea rows="6" class="span12 input-xlarge" placeholder="Haganos llegar sus comentarios, sugerencias, consultas, etc."></textarea> 
           </div> 
          </div> 
          <div class="control-group"> 
           <div class="controls"> 
            <button type="submit" class="btn btn-success">Enviar Mensaje</button> 
           </div> 
           <br class="clear"> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
      <div class="span6"> 
       <div class="row-fluid span12"> 
        <img class="span9 offset2" src="http://geotelca.com/sitio/assets/img/examples/flyer_back.png"> 
       </div> 
       <div class="row-fluid"> 
        <div class="row-fluid span12 address"> <address> 
            Zona Industrial Los Curos, Calle 1, Edif. Geotelca No. A-8, Mérida, Edo. Mérida 
           </address> 

        </div> 
        <div class="row-fluid e-mail"> 
         <div class="span4 offset6"> <a href="mailto:direccion@geotelca.com">direccion@geotelca.com</a> 

         </div> 
        </div> 
       </div> 
      </div> 
      <div class="span1 social-links"> 
       <div class="row-fluid vertical-bars"> 
        <div class="span3 bar bar-lightblue"></div> 
        <div class="span3 bar bar-purple"></div> 
        <div class="span3 bar bar-orange"></div> 
        <div class="span3 bar bar-lightorange"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--/.container-fluid--> 
    <div id="push"></div> 
</div> 
<!--/#wrap--> 
<div id="footer"> 
    <div> 
     <div class="decorative-lightblue"></div> 
     <div class="decorative-purple"></div> 
     <div class="decorative-orange"></div> 
     <div class="decorative-lightorange"></div> 
    </div> 
    <div class="container"> 
     <p class="muted credit">Dise&ntilde;ado, codificado y mantenido por <a href="http://twitter.com/kenshin23">@kenshin23</a> 

     </p> 
    </div> 
</div> 

Answer 1

我會說你最好的選擇在這裏會之一的jQuery插件在那裏做到這一點... eqHeight.coffee似乎是相當有據可查：

https://github.com/jsliang/eqHeight.coffee/

至於在垂直空間中集中這些社交鏈接，您可能需要使用更多的Javascript才能實現。雖然，老實說，我可能會把它們放在一個div容器中，位置：fixed;並隨着用戶的滾動讓他們在該列上下滑動。

編輯： 只是注意到你添加了你的HTML文件...在我鏈接到的第一個插件的情況下，你需要爲每個列添加一個類（可能是'eq-height'）你想要匹配的高度（第一個外部span5和span6，然後是所有的酒吧列divs）。然後在jQuery文檔準備好後，使用：

$(document).ready(function() { 
    $(".content").eqHeight(".eq-height"); 
});