当右上 div 的高度是动态的时，如何让右下 div 不溢出父 div 和填充？答案

【问题标题】：How do I get the bottom right div not overflow the parent div and padding when the top right divs height will be dynamic?当右上 div 的高度是动态的时，如何让右下 div 不溢出父 div 和填充？
【发布时间】：2014-08-29 21:47:03
【问题描述】：

我正在处理一个包含三个容器的网页。左侧的一个容器占其父级高度的 100%，右侧堆叠的两个容器。右上角的容器具有动态内容，因此其大小会发生变化。我希望右下角的容器占据父 div 的其余部分，w/0 溢出其父级。目前它溢出了。

以下是我尝试过的（jfiddle http://jsfiddle.net/ULyCH/1/）：

<html>
    <head>
        <style type="text/css">
            .container{             
                background: blue;
                width: 1000px;
                height: 1000px;
                padding: 15px;
                overflow: hidden;
            }

            .left{
                background: green;
                float: left;
                width:30%;
                height: 100%;
            }

            .right-top{
                background: grey;
                float:right;
                width: 70%;
                height: 300px;
            }

            .right-bottom{
                background: yellow;
                float: right;
                width: 70%; 
                height: inherit;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">left left left left left</div>            
            <div class="right-top">right-top right-top right-top</div>
            <div class="right-bottom">right-bottom right-bottom</div>           
        </div>
    </body>
</html>

【问题讨论】：

那么问题出在哪里？还可以创建一个 jsfiddle 来帮助人们尝试。
@gp。问题是左下角的 div 当前溢出。请参阅我添加的 Jfiddle。

标签： html css stylesheet

【解决方案1】：

1) http://jsfiddle.net/48QVB/1/

<div class="container">
    <div class="wrapper">
        <div class="left">left left left left left</div>
        <div class="right-top">right-top right-top right-top</div>
        <div class="right-bottom">right-bottom right-bottom</div>
    </div>
</div>

只需在 .container 中添加一个包装器，包装器带有溢出：隐藏。

.container 有子元素仍然可以在上面的填充，即使没有溢出，因此溢出：隐藏在 .container 本身不会给我们太多。我想这正是你所抱怨的。

2) http://jsfiddle.net/48QVB/2

<div class="container">
    <div class="left">left left left left left</div>
    <div class="right">
        <div class="right-top">right-top right-top right-top</div>
        <div class="right-bottom">right-bottom right-bottom</div>
    </div>
</div>

好吧，您希望右下角的 div 填充 .container 中的全部剩余空间的原因是...背景？只需为每列添加适当的容器，即 .left /and/ .right。为它们设置背景。然后为右上角的 div 设置另一个背景，如果你真的想要的话。

【讨论】：