構築中のサイトに Twitter Bootstrap (最新バージョン - 2.3.2) を使用しています。サイトの応答性を維持し、ベスト プラクティスを適用しながら、次のことを達成したいと考えています。
これが私が持ちたいものの非常に大まかなスケッチです：
このサイトには、固定ナビゲーションバーを備えた基本的なヘッダーと、3 つの内部 div (span5、span6、および span1 (合計 12 列)) を持つ content-fluid div があります。content div の後に、会社/著作権情報などを含むスティッキー フッター。
私が抱えている問題は、span1 列にあります。それは基本的に装飾的です (それぞれ 25% 幅のサイズの 4 つの垂直カラーバーがあります) が、私は持っていたい:
- 黒いボックスで示されているように、列の垂直方向中央に配置されたソーシャル リンク アイコン (Twitter、Facebook、LinkedIn など)。
- 色付きの各バー内で反時計回りに 90 度回転したテキスト。それはそれぞれ 1 語だけであり、優先事項ではありません。
- ページの高さは現在、span5 か span6 かに関係なく、最も高い div によって設定されているため、各バーは親コンテナー (この場合はコンテンツ div) の高さ全体を埋めるように伸びます。
これを実現する方法はおそらくたくさんあると思いますが (純粋な 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>