Html 当右上角的div高度是动态的时，如何使右下角的div不溢出父div和padding？_Html_Css_Stylesheet

Html 当右上角的div高度是动态的时，如何使右下角的div不溢出父div和padding？

html css

Html 当右上角的div高度是动态的时，如何使右下角的div不溢出父div和padding？,html,css,stylesheet,Html,Css,Stylesheet,我正在一个有三个容器的网页上工作。左侧一个容器占据其父容器高度的100%，右侧两个容器堆叠。右上角的容器具有动态内容，因此其大小将发生变化。我希望右下角的容器占据父div的其余部分，w/0溢出其父div。目前它已溢出下面是我尝试过的（jfiddle）： .容器{ 背景：蓝色；宽度：1000px；高度：1000px；填充：15px；溢出：隐藏； } .左{ 背景：绿色；浮动：左；宽度：30%；身高：100%； } .右上角{ 背景：灰色；浮动：对；宽度：70%；高度：300

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

下面是我尝试过的（jfiddle）：


.容器{
背景：蓝色；
宽度：1000px；
高度：1000px；
填充：15px；
溢出：隐藏；
}
.左{
背景：绿色；
浮动：左；
宽度：30%；
身高：100%；
}
.右上角{
背景：灰色；
浮动：对；
宽度：70%；
高度：300px；
}
.右下角{
背景：黄色；
浮动：对；
宽度：70%；
身高：继承；
}
左左
右上右上右上
右下右下

1）


左左
右上右上右上
右下右下

只需在内部添加一个包装器。容器，溢出包装器：隐藏

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

(二)


左左
右上右上右上
右下右下

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

那么问题出在哪里？创建一个jsfiddle来帮助人们尝试。@gp。问题是左下角的div当前溢出。请看我加的小提琴。

<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>

<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>

<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>