如何在層次結構中擴展子div的高度以適合父div？

Question

以下是我的布局結構。 它的代碼發布在此問題的末尾。 我想要的是

1. 包裝div的entire-page height不應超過沒有滾動條的瀏覽器窗口的高度 。 我不想在父窗口中使用滾動條。

2. 在left-div和right-div heigh T應當等於height他們的parent div 。 他們的parent div應該適合height其parent div 等 ，直到要看到的效果是left-div和right-div已經跨越了所有可用的空間給他們 “高度”

3. left-div和right-div應該這樣，如果它們的內容增加其height ， 則應顯示scroll-bar ，但是如果內容小於其高度，則不應顯示任何 scroll-bar 痕跡 。

我已經搜索了很多，並嘗試了各種方法，但是沒有任何幫助使我獲得確切的預期效果。

那我該怎么辦呢？

問題布局：

我想要的是 ：

代碼：

<div id="entire-page" style="padding-top: 72px; overflow: hidden; background-color: grey; height: 100vh;" >         
    <div id="parent-div" style="padding-left: 30px; padding-right: 30px; ">            
        <div id="information-bar" style=" border-bottom-style: solid; border-bottom-color: grey; border-bottom-width: 1px; font-family: sans-serif; color: #000029; padding:5px; ">                
            <p> I am the information bar... </p>                
        </div>            
        <div id="main-content-wrapper" style="position: relative; overflow: hidden; width:100%; height:100%; background-color: greenyellow;">                
            <div id="left-div" style="; width: 49.9%; display:block; float:left; font-family: sans-serif; border-right-color:grey; border-right-width: 1px; border-right-style: solid; position:absolute; height: 100%; left:0; background-color: blueviolet;">
                <p style="padding-left:25px; padding-right:25px; padding-top:10px; padding-bottom:25px; ">
                    A , concluded that city dwellers are on average more generous than residents of rural areas.A survey of charitable 
                    giving in the state found that the average dollarnt contributed by residents of rural 
                    areas. The survey’s creators, an urban-promotion group known as Live in the City, concluded that city 
                    dwellers are on average more generous than residents of rural areas.
                </p>

            </div>                 
            <div id="right-div" style="width:50%; display:block; float:right; font-family: sans-serif; background-color: brown;">                     
                <p style="padding-left:25px; padding-right:25px; padding-top:10px; padding-bottom:25px; " >
                    by residents of rural areas. The survey’s creators, an urban-promotion group known as Live in the City, 
                    concluded that city dwellers are on average more generous thidents of urban areas to 
                    programs for the homeless was $15 greater than the amount contributed by residents of rural areas. 
                    The survey’s creators, an urban-promotion group known as Live in the City, concluded that city dwellers 
                    are on average more generous than residents of rural areas.
                </p>                    
            </div>                
        </div>                
    </div> 
</div>

頁眉和頁腳將包含在外部文件中。

---

編輯：-

這很奇怪。 以下是編寫html文件並從netbeans進行編譯的結果。 在jsfiddle（ http://jsfiddle.net/U7PhY/2/ ）中，它可以正常工作！

Answer 1

<div id="entire-page" style="padding-top: 72px; overflow: hidden; background-color: grey; height: 100vh;" >

去除高度：100vh； 嘗試使用height：100％，否則請從樣式中刪除此屬性。...如果不起作用，請進行提琴操作。

Answer 2

<div id="parent-div" style="padding-left: 30px; padding-right: 30px; ">

    <div id="information-bar" style=" border-bottom-style: solid; border-bottom-color: grey; border-bottom-width: 1px; font-family: 
         sans-serif; color: #000029; padding:5px; ">

        <p> I am the information bar... </p>

    </div>

    <div id="main-content-wrapper" style="position: relative; overflow: hidden; width:100%; height:100%; background-color: greenyellow;">

        <div id="left-div" style="height=100%; width: 49.9%; display:block; float:left; font-family: sans-serif; 
              border-right-color:grey; border-right-width: 1px; border-right-style: solid; position:absolute; height: 100%; left:0; background-color: blueviolet;">

             <p style="padding-left:25px; padding-right:25px; padding-top:10px; padding-bottom:25px; ">A , concluded 
                 that city dwellers are on average more generous than residents of rural areas.A survey of charitable 
                 giving in the state found that the average dollarnt contributed by residents of rural 
                 areas. The survey’s creators, an urban-promotion group known as Live in the City, concluded that city 
                 dwellers are on average more generous than residents of rural areas.</p>

        </div>

         <div id="right-div" style="height:100%; width:50%; display:block; float:right; font-family: sans-serif; background-color: brown;">

            <p style="padding-left:25px; padding-right:25px; padding-top:10px; padding-bottom:25px; " >by 
                 residents of rural areas. The survey’s creators, an urban-promotion group known as Live in the City, 
                 concluded that city dwellers are on average more generous thidents of urban areas to 
                 programs for the homeless was $15 greater than the amount contributed by residents of rural areas. 
                 The survey’s creators, an urban-promotion group known as Live in the City, concluded that city dwellers 
                 are on average more generous than residents of rural areas.</p>

        </div>

    </div>

</div> 

ķ