子供と同じ高さの列のレスポンシブクロスブラウザソリューション

Question

ストレートポイント。

私は、写真のように応答性の高い2列構成レイアウトの解決策が必要です。

.left/.right列幅の比は常に.parent 75/25％であるべきであり、その高さが常に同期しなければなりません。

.left列は、すべてのビューポートの変更及び.rightカラムと幅と高さにスケール画像が正確に1/3 .parent高さのそれぞれを取る3つのつの子要素（.cta）を含むべきで含有すべきです。

に許容可能な溶液のための基準は、できるだけ多くのデバイスやブラウザの

• サポート（IE9 +は結構です）
• HTCなどを使用したいようなブランドベンダー特定のブラウザのサポート
私が非JSソリューションを思い付くしたい .leftと .rightの両方のための明示的な高さを設定するためにJavaScriptを使用するのは簡単だろうが、
• フレキシボックスはオプション
• ではありません私は満足のいく解決策を作ってみた

最も近い.leftと.right高さが常に同期されていることを確認するためにdisplay: table-cell;を使用しています。残念ながら、このソリューションは、親コンテナと子コンテナの両方がパーセンテージを使用してディメンションを定義し、それらのディメンションを計算するためにそれぞれのフローに依存する場合、結果が未定義であることを明示するCSS仕様のため、IEでは機能しません。コンテナの高さは、IE以外のすべてのブラウザでフルハイトに拡大されます（.right）。

Codepen example

HTML

<div class="parent"> 
    <div class="left"> 
    <div class="image-container"><img class="image" src="http://placehold.it/1300x780" alt="" /></div> 
    </div> 
    <div class="right"> 
    <div class="cta"> 
     <a>LINK #1</a> 
    </div> 
    <div class="cta"> 
     <a>LINK #2</a> 
    </div> 
    <div class="cta"> 
     <a>LINK #3</a> 
    </div> 
    </div> 
</div> 

CSS

.parent { 
    display: table; 
    width: 90%; 
    height: 100%; 
    margin: 0 auto; 
} 

.parent > div { 
    display: table-cell; 
    height: 100%; 
    vertical-align: top; 
    text-align: center; 
} 

.left { 
    width: 75%; 
} 

.image { 
    display: block; 
    width: 100%; 
    height: auto; 
} 

.right { 
    width: 25%; 
    background: #bbb; 
} 

.cta { 
    display: table; 
    width: 100%; 
    height: 33.33%; 
    font-family: Helvetica, Arial, sans-serif; 
    overflow: hidden; 
    background: #bbb; 
    color: #fff; 
    text-transform: uppercase; 
    text-align: center; 
} 

.cta a { 
    display: table-cell; 
    vertical-align: middle; 
    height: 100%; 
    cursor: pointer; 
} 

すべてはJavaScriptをバックアップソリューションとして常にある失敗した場合。しかし、それは2016年に私の心を賭けてしまいました。私たちは、必要なもののような簡単な解決策を達成するために、ハックに対処するには依然として呪われています。

Answer 1

crossbrowserはなく、恐竜thne inline-blockとcalc()のピンチを助けるかもしれないため場合：

* { 
 
    box-sizing: border-box; 
 
    margin:0; 
 
} 
 
.parent div div a, 
 
.parent div div { 
 
    border: solid 1px; 
 
} 
 
.parent div.left { 
 
    padding: 1em; 
 
    border: solid 1px; 
 
} 
 
.parent div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 100%; 
 
} 
 
.parent { 
 
    width: 70%;/* demo purpose, do run it in full page too */ 
 
    margin: auto; 
 
    background:yellow; 
 
} 
 
img { 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.parent .left { 
 
    width: 75%; 
 
} 
 
.parent .right { 
 
    width: 25%; 
 
} 
 
.parent div div a { 
 
    margin: 0.88em; 
 
    display: block; 
 
    text-align: center; 
 
    /* if floatting pseudo do 
 
    overflow:hidden;*/ 
 
} 
 
.parent div div a:before { 
 
    content: ''; 
 
    padding-top: calc(60% - 0.5em);/* is calc() allowed ? if not keep 60% and remove margin:1em from links */ 
 
    /* float:left; or with vertical-align */ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="parent"> 
 
    <div class="left"> 
 
    <div class="image-container"> 
 
     <img class="image" src="http://placehold.it/1300x780" alt="" /> 
 
    </div> 
 
    </div><!-- cure white-space disturbance 
 
    --><div class="right"> 
 
    <div class="cta"> 
 
     <a>LINK #1</a> 
 
    </div> 
 
    <div class="cta"> 
 
     <a>LINK #2</a> 
 
    </div> 
 
    <div class="cta"> 
 
     <a>LINK #3</a> 
 
    </div> 
 
    </div> 
 
</div>

http://codepen.io/anon/pen/VjpdZE

IE11がそれを取得します：