Question

I want the "blue" container to always be 70px high, while the previous "green" div always max out the height available when the div is resized with javascript.

我与它在一起,没有找到适当的解决办法。希望将受到赞赏。

“entergraph

Answer 1

As promised, here s my answer.

。

rel=“nofollow>>><>Live Demo

<>光>:

<div id="parent">
    <div id="left">height: 100%</div>
    <div id="right">Content</div>
    <div id="rightFooter">height: 70px</div>
</div>

<>CSS:

#parent {
    position: relative;
    height: 200px
}
#left, #right, #rightFooter {
    position: absolute
}
#left {
    width: 200px;
    top: 0;
    bottom: 0;
    left: 0
}
#right {
    top: 0;
    right: 0;
    bottom: 70px;
    left: 200px;
    overflow-y: auto
}
#rightFooter {
    height: 70px;
    right: 0;
    bottom: 0;
    left: 200px
}

Answer 2

是否像这项工作一样?

http://jsfiddle.net/loktar/KAtE3/2/“rel=“nofollow” Live Demo

Added an animation of the height so you can see the content extending.

<>>

<div id="parent">
    <div class="left">
        Lefty
    </div>
    <div class="right">
        <div id="rightContent">
            right Content
        </div>
        <div id="rightFooter">
            Right Footer
        </div>
    </div>
    <div class="clear"></div>
</div>

<>CSS

#parent{
    height:300px;
}
.left{
    float: left; 
    width: 33%; 
    background: red;
    height:100%;
}
.right{
    float : left; 
    width: 66%;
    height:100%;
}
#rightContent{
    height: 100%; 
    background: blue;
}
#rightFooter{
    background: yellow; 
    height: 70px; 
    float: right; 
    width: 100%; 
    margin-top: -70px;
}
.clear{
    clear:both;
}

在发表评论之前,这只是部分解决办法,内容领域的案文将融为正文......寻找解决办法,或者其他人可能修改我的标记/标记以对此负责。

Answer 3

Made an example for you here :)

您需要留有左侧的浮iv,另外两条右 d也有一个 wrap。

检查:

友情链接