javascript - 如何在层次结构中扩展子 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% 或者如果不从样式中删除此属性.... 如果它不起作用，请制作 fiddle 。