は、テキストがページ境界

Question

を拡張した後、私は次のフィドル持っ等しいコラムの高さを取得できません：あなたが見ることができるようにhttps://jsfiddle.net/n2fole00/x200bfjs/

をパネルのテキストがページサイズを超えていない場合は、パネルは、それぞれに比例して完璧にフィットそうでなければ、一致しないパネル高さの望ましくない影響、またはパネルからのテキストブリードがある。パネルに最小高さのプロパティを与えると、テキストの出血が修正されますが、一致しない列の高さは修正されません。

アドバイスはありますか？ありがとう。

HTML

<div class="hm-left"> 
    <div class="cafe hm-panel"> 
    <h1>Cafe</h1> 
    <p> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit... 
    </p> 
    </div> 
    <div class="restaurant hm-panel"> 
    <h1>Restaurant</h1> 
    <p> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit... 
    </p> 
    </div> 
</div> 
<div class="hm-right"> 
    <div class="services hm-panel"><h1>Services</h1> 
    <p> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit... 
    </p> 
</div> 
</div> 

CSS

body, html { 
    width: 100%; 
    height: 100%; 
    margin:0; 
    color: white; 
} 

.hm-panel { 
    padding: 15px; 
} 

.hm-left { 
    width: 50%; 
    height: 100%; 
    float:left; 
} 

.hm-right { 
    width: 50%; 
    height: 100%; 
    float:right; 
} 

.cafe { 
    background-color: #6B8E23; 
    height: 50%; 
} 

.restaurant { 
    background-color: brown; 
    height: 50%; 
} 

.services { 
    background-color: #FF8C00; 
    height: 100%; 
} 

Answer 1

パネルの内容が小さいと同様---すべての異なるシナリオのために働くように思われ、私はジェイクツァイツの提案に私の答えで、まだいくつかの問題を抱えていたが、私は次のことを持っていますそのドキュメントの高さ、およびそれがより大きい場合にも同じです。

min-heightプロパティを使用してCSSを少し修正し、hm-leftとhm-right列を操作して、ドキュメントの高さをjQueryと一致させることでした。

CSS

body, html { 
    width: 100%; 
    min-height: 100%; 
    margin:0; 
    color: white; 
} 

.hm-left { 
    width: 50%; 
    min-height: 100%; 
    float:left; 
} 

.hm-right { 
    width: 50%; 
    min-height: 100%; 
    float:right; 
} 

.cafe { 
    background-color: #6B8E23; 
    height: 50%; 
} 

.restaurant { 
    background-color: brown; 
    height: 50%; 
} 

.services { 
    background-color: #FF8C00; 
    height: 100%; 
} 

jQueryの例えば

var doc_height = $(document).height(); 

$(".hm-left").css("height", doc_height + "px"); 
$(".hm-right").css("height", doc_height + "px"); 

Answer 2

私はボックスの正確な寸法を得るだけでなく、維持するために、box-sizing: border-boxだけでなく、あなたのコンテナのそれぞれにoverflow-y: auto;を追加しましたコンテナ内でテキストを表示できます。

はここでフィドルです：

https://jsfiddle.net/x200bfjs/2/

アップデート：私は、HTMLの構造を変更しなければならなかったページレベルでoverflow: autoを保つために

。私はすべてをコンテナに入れ、オレンジ色の背景をサービスに付けました。うまくいけば、それは問題ではない。ここではフィドルです：

https://jsfiddle.net/x200bfjs/3/