tobynet/!!! The 100% Height div block with responsible !!!.markdown

## !!! The 100% Height div block with responsible !!!.markdown

      
    Raw
  

              !!! The 100% Height div block with responsible !!!.markdown
            
          
    !!! The 100% Height div block with responsible !!!

A Pen by TOBY on CodePen.
License.

  
## index.html
// Bootstrap を使った段組みのサンプル
// col-xs-* なので スマホのときも含めての段組み
.row.row-table
  .left.col-xs-8
    .img-block aaaaa
  .right.col-xs-4 bbbb

.row.row-table
  .left.col-xs-6 dddd
  .right.col-xs-6
    .img-block eeee


## style.css
// todo: table, table-cell にする方法
.row-table
  display: table

// 画像などで高さがある場合を想定
.img-block
  height: 140px

// 視認性を上げるための設定
.row
  width: 80%
  margin: 0em auto

div
  border: 2px solid #cccccc
  background: #dddddd
  margin: 0

div > div
  border: 2px solid #cccccc
  background: #eeeeee


## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	// Bootstrap を使った段組みのサンプル
	// col-xs-* なのでスマホのときも含めての段組み
	.row.row-table
	.left.col-xs-8
	.img-block aaaaa
	.right.col-xs-4 bbbb

	.row.row-table
	.left.col-xs-6 dddd
	.right.col-xs-6
	.img-block eeee
	// todo: table, table-cell にする方法
	.row-table
	display: table

	// 画像などで高さがある場合を想定
	.img-block
	height: 140px

	// 視認性を上げるための設定
	.row
	width: 80%
	margin: 0em auto

	div
	border: 2px solid #cccccc
	background: #dddddd
	margin: 0

	div > div
	border: 2px solid #cccccc
	background: #eeeeee