Question

我的内容div的高度为0，但我想让它动态调整到它的子节点 - 这是位置绝对的。我正在尝试使用砌体作为显示搜索结果的方式，因此有时内容div将如下所示：http://i.imgur.com/UPLtrIc.jpg以及其他时间如下：http://i.imgur.com/5X0qaaD.jpg。如何实现这一目标？

我尝试使用：

var biggestHeight = "0";
$("#content *").each(function(){
  if ($(this).height() > biggestHeight ) {
    biggestHeight = $(this).height();
  }
});

$("#content").height(biggestHeight);

但它不起作用。

提前致谢：）

CSS

#wrapper > main > #content{
max-width: 960px;
height: auto;
margin: 0 auto;
position: relative;
}

#wrapper > main > #content > article{
position: absolute;
width: 32%;
}

JS

function renderGrid(){

var blocks = document.getElementById("content").children;
var pad = 20, cols = 3, newleft, newtop;
for(var i = 1; i < blocks.length; i++){
    if(i % cols == 0){
        newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
        blocks[i].style.top = newtop+"px";
        console.log();
    }else{
        if(blocks[i-cols]){ 
            newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
            blocks[i].style.top = newtop+"px";
        }
        newleft = (blocks[i-1].offsetLeft + blocks [i-1].offsetWidth) + pad;
        blocks[i].style.left = newleft+"px";
    }
}
}

window.addEventListener("load", renderGrid, false); 
window.addEventListener("resize", renderGrid, false);

Answer 1

对于初学者，您可以在内容div上尝试overflow: auto，但我认为这是默认值。

很高兴看到你的HTML。

如果您希望内容div始终为全高（看起来这是一个很好的解决方案），您可以使用类似

的内容

#wrapper > main > #content{
     height: 90vh;
}

表示90％的视口（浏览器中的可见部分）高度，并将搜索栏设置为其余部分（此示例为10％）。

请注意，浏览器与该浏览器的兼容性不会太久。

想想你是否真的想要用这个功能和绝对值来定位你的物品。它根本不会响应。如何计划接近移动设备？

您想要的是css grid或使用弹性框。我建议后者。它的浏览器兼容性确实非常好，flex box真正解决了所有的设计问题。它易于使用且反应灵敏。

这是一个很好的资源Solved by FlexBox

砌体div高度= 0，但应调整为搜索结果

1 个答案: