divの100％の高さを動的な高さのdiv内に割り当てます

Question

divの高さを親の100％に設定しようとしています。

左側のバンドは正常に見えるが、下にスクロールしたとき、あなたはそれがブラウザのウィンドウとしてのみと高くなっていることがわかります。それは親の完全な高さを持つことになっています。

下にスクロールした場合、背景イメージでわかるように、コンテンツ部門にも同じ問題が発生しているようです。この問題を解決するには、コンテンツdivのheight: 100%プロパティを削除できますが、その場合は100％の高さを与えるために親divに高さが定義されている必要があるため、左側のストリップも機能しなくなります。

私が使用しているZurb Foundationフレームワークがbodyとhtmlの高さを100％に設定していることに気づきました。このプロパティをhtml body height = autoに上書きしました。私がコンテンツdivから高さ= 100％のプロパティを削除すると、右側のすべての結果アイテムで正しくスケールされ、正しい高さになります。しかし、その場合は、左側の検索ディビジョンに100％の高さを割り当てることはできません。この問題を解決するにはどうすればよいですか？

#search-column { 
    float: left; 
    margin-left: 6%; 
    margin-right: 6%; 
    width: 24%; 
    background-color: rgba(255, 255, 255, .85); 
    height: 100% !important; 
} 
#content { 
    background-image: url("../images/bg.jpg"); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    margin: 0; 
    padding-bottom: 20px; 
    height: auto; 
} 
html, 
body { 
    height: auto; 
} 

私はhtmlと身体からの高さの自動を削除した場合のフレームワークで指定され、その高さは、ブラウザウィンドウの高さになります。それは今あるよう

私のコード。これにより、右に多くの検索結果のdivがある場合のブラウザよりも高いはずのコンテンツdivのデザインが破られます。

おそらく、この高さと固定位置で作業することができますが、後で検索divの内容をスムーズにスクロールするために、左側の検索バンドが完全な高さを持つことが重要です（この場合、2000ピクセルの周りの）内容が

Answer 1

変更しよう：

html, body{ height: 100%;} 

それはすべての可能性の高さ

---

を使用するようにページを強制します

そして、このコードを追加します。

#search-column{ 
    min-height: 100%; 
    max-height:100%; 
} 

それはそれは高さの唯一の100％