Question

我有一个带有两个浮动子div的父容器。左侧div将包含一个响应滑块，右侧div将包含文本。

我想要的是正确的容器具有与左div一致的最大高度。基本上，我想要的是“溢出：隐藏”效果。任何可以使正确的盒子比左盒子长得高的东西都必须切割/不显示。

溢出：如果我使用设置高度隐藏会有效，但我不是。如何在流体高度上实现相同的效果？这样右框永远不会比左框高......

Answer 1

如果有可能使用javascript，您可以使用以下css：

.left, .right {
    padding:1%;
}
.left {
    background: #ddd;
    float:left;
    width:73%;
}
.right {
    width: 23%;
    background: #bbb;
    overflow: hidden;
}

和javascript（使用jquery）：

jQuery(function($){

    function resizeRight(){
        $('.right').height( $('.left').height() );
    };

    resizeRight();

    // let's ensure the sizes stay in sync if the user resizes their window
    $(window).resize( function() {
        resizeRight();
    });

});

这里有一个例子：http://jsfiddle.net/nr4zrcjw/1/

普通Javascript版本

如果你没有其他任何事情，请不要仅仅为此而包含它。相反，您可以使用此脚本：

var resizeRight = function resizeRight(){
    var r = document.getElementById('right-col')
    var l = document.getElementById('left-col')

    r.style.height = l.offsetHeight + 'px';
    console.log( l.style.paddingTop );

}

var addEvent = function(elem, type, eventHandle) {
    if (elem == null || typeof(elem) == 'undefined') return;
    if ( elem.addEventListener ) {
        elem.addEventListener( type, eventHandle, false );
    } else if ( elem.attachEvent ) {
        elem.attachEvent( "on" + type, eventHandle );
    } else {
        elem["on"+type]=eventHandle;
    }
};
addEvent(window,'resize',resizeRight);

resizeRight();

见到这里; http://jsfiddle.net/g689bupe/1/

Answer 2

如果正确的容器可以有固定的宽度，那么这是一个CSS解决方案。

＆＃13;

#parent {
    overflow:hidden;
    position:relative;
}

.slider-container {
    border:5px solid blue;
    margin-right:210px;
}

.shrinkable {
    border:5px solid red;
    width:200px;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
}

＆＃13;

<div id="parent">
    <div class="slider-container">
        Remove text from me to see the right column shrink.
        Remove text from me to see the right column shrink. 
        Remove text from me to see the right column shrink. 
        Remove text from me to see the right column shrink. 
        Remove text from me to see the right column shrink. 
        Remove text from me to see the right column shrink.
        Remove text from me to see the right column shrink.
        Remove text from me to see the right column shrink.
        Remove text from me to see the right column shrink.
         
    </div>
    <div class="shrinkable">
        The rain in spain falls mainly on the plain. 
        The rain in spain falls mainly on the plain.
        The rain in spain falls mainly on the plain.
        The rain in spain falls mainly on the plain.
        The rain in spain falls mainly on the plain.
        The rain in spain falls mainly on the plain.
    </div>
</div>

＆＃13;

右div必须有左div的最大高度？

2 个答案:

普通Javascript版本