Question

以下是我的布局结构。它的代码发布在这个问题的最后。我想要的是

包装器div entire-page height不应超过浏览器窗口的高度而不显示滚动条。 我不想在父窗口中显示滚动条。
left-div和right-div heigh t应该等于height的{{1}}。他们的parent div应该适合其parent div和的height ，直到看到的效果是 parent div和left-div已覆盖了所有可用空间 ＆＃34; heightwise＆＃34;
right-div和left-div应该是这样的，如果他们的内容增加right-div， height应显示，但如果内容小于其高度，则不应显示{em> scroll-bar的任何跟踪。

我已经搜索过很多东西并尝试了各种各样的东西，但没有任何帮助我获得确切的预期效果。

那我该如何解决呢？

问题布局： enter image description here

我想要什么：

enter image description here

代码：

scroll-bar

页眉和页脚将包含在外部文件中。

编辑： -

这很奇怪。以下是编写html文件并从netbeans编译它的结果。在jsfiddle（http://jsfiddle.net/U7PhY/2/）中，它有效！

enter image description here

Answer 1

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

移除高度：100vh;尝试使用高度：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>

ķ

如何在子层次结构中扩展子div的高度以适应父div？

2 个答案: