2016-08-23 8 views
0

私はページのクイックUIを作成しており、まだ初期段階です。ブートストラップCSSカラム

私がやろうとしていることがあります。

添付のスクリーンショットでは、左側にHRからfooterになる完全な高さの列があります。

enter image description here

私は、ページの基本的なレンダリングでフィドルを作成しました。

フィドル:https://jsfiddle.net/unovgp8b/

私は左の列にクラスを追加し、それを100%の高さを与えてみましたが、それは働いたことはありません。私の目標は、パネルの詳細が入力されたときに右のコンテンツがページを押し下げる方法を見て、この列(実線の背景)が常に100%の高さになるようにすることです。

ブートストラップを使用して100%の高さの列を作成する簡単な方法はありますか?

答えて

0

あなたは、私と思う同じ高さの列を探しています。これを行うための多くの方法がありますが、1がoverflow: hiddenに設定され、外側の容器を持っているだろうし、左の列にこれを追加します。ここ

margin-bottom: -99999px; 
padding-bottom: 99999px; 

ヒープより多くの例:https://css-tricks.com/fluid-width-equal-height-columns/

フィドル:https://jsfiddle.net/h3no8jww/1/

+0

ありがとう、私はこれを試して、オーバーフローは、フッターのすべての方法を行ったが、私は左の列の背景色を設定すると、それはまだ左のメニューの最後の要素の後に切断します。 – SBB

+0

フッターはコンテナの外側にある必要があります。パディングを追加してみましょう。切り捨てを避けるために100000pxとしましょう。 –

+0

注:コンテナは、行のオーバーフローを設定できるように、左列とコンテンツ列の両方を含む必要があります。 –

関連する問題