Question

为什么我的文字在其上方有图像时会超出其容器？

http://www.blakearchive.org/blake/public/exhibits/test.html

menuBarLine div和staticImage div和右列div（包含文本的列，即使它在左边）设置为table-cell，列div（他们的列） container）设置为table。当图像不存在时，右列表现正常。尽管menuBarLine位于视口顶部，但它并没有延伸到视口之外，但是当图像存在时，它就会延伸到视口之外。

Answer 1

JQUERY

var rgheight = $(window).height() - ($('#staticImage').height() + $('#menuBarLine').height() + 40); $("#right").height(rgheight);

改变css

#columns .right {
        position: relative;
        float: right;
        width: 34%;
        height: 100%;
        overflow-y: auto;
        padding: 2%;
        text-align: justify;
        box-sizing: border-box;
        display: table-cell;
        padding-top: 20px;
        padding-bottom: 20px 
    }

注意：在rgheight th'+ 40'用于填充calc：在css规则中我将padding top和bottom设置为20px

为了调整大小支持强制js：

$( window ).resize(function() {
      var rgheight = $(window).height() - ($('#staticImage').height() + $('#menuBarLine').height() + 40); $("#right").height(rgheight);
});

然后在你的js改变

function toggleMap() {
   var staticimgh = $('#staticImageSrc').height();
   if(staticimgh < 1) {$('#staticImageSrc').height(0)}  else {$('#staticImageSrc').css("height","auto");}    
}

当上面有图像时，为什么我的文本会超出其容器范围？

1 个答案: