我正在为我正在构建的网站使用 Twitter Bootstrap（最新版本 - 2.3.2），并希望在保持网站响应速度的同时实现以下目标，并为其应用最佳实践。
这是我想要的一个非常粗略的草图：
该站点有一个带有固定导航栏的基本标题，一个内容流畅的 div，它具有三个内部 div：span5、span6 和 span1（总共 12 列）。在内容 div 之后，带有公司/版权信息等的粘性页脚。
我遇到的问题是 span1 列。它基本上是装饰性的（它有 4 个垂直颜色条，每个颜色条的宽度为 25%），但我想要：
- 社交链接图标在列中垂直居中（Twitter、Facebook、LinkedIn 等），如黑框所示。
- 文本在每个彩色条内逆时针旋转 90 度。每个只有一个词，不是优先事项。
- 每个条都拉伸以填充父容器的整个高度（在本例中为内容 div），因为页面的高度当前由最高 div 设置，无论是 span5 还是 span6。
我知道可能有很多方法可以实现这一点（纯 CSS、javascript、背景图像平铺），但我正在寻找最佳实践：避免额外的标记，使用正确的技术，以便尽可能多地学习。我尝试将父容器（和内部条）设置为 height: 100%; 并且也可以使用 min-height ，但是 min-height （似乎）不适用于百分比。
非常欢迎任何帮助和/或建设性的批评。
编辑：JSFiddle 并添加完整代码：JSFiddle
另外，链接到原始站点（以防 JSFiddle 搞砸了）：原始页面
<!-- 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í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ón, Adaptación,
<br/>Adecuación y Remodelació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&ll=8.561755,-71.204721&spn=0.004716,0.006571&t=m&z=18&output=embed"></iframe>
<br /><small><a href="http://maps.google.com/?ie=UTF8&ll=8.561755,-71.204721&spn=0.004716,0.006571&t=m&z=18&source=embed" style="color:#0000FF;text-align:left">Ver mapa má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ó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ñado, codificado y mantenido por <a href="http://twitter.com/kenshin23">@kenshin23</a>
</p>
</div>
</div>