让 div 在我的页面上一直向下延伸？

Question

这是我的页面：http://goodshitdesign.no/ （这是我设计标志的爱好的作品集）

我只是想在我的标题下将页面分成两部分，左侧是一个信息框，右侧是一个灵活的徽标网格。

问题是，当我添加太多徽标时，页面会变得比原来的 100% 长，并且信息框在底部被剪短，并且徽标开始出现在其下方。您可能会在页面上看到我的意思。

我无法将信息框的位置设为绝对位置，因为那样徽标会位于信息框的后面。

我不能将 logogrid 放在它自己的 div 中，因为这样行和列不会调整到最适合页面大小的大小。

有人可以帮帮我吗？将不胜感激！

Answer 1

你可以使用上面提到的 flexbox，或者像这样的容器使用新的 css：

div.infobox {
width: 30%;
height: 100%;
background-color: #ebebeb;
text-align: center;
display: inline-block;
float: left;
}

为您的徽标容器 div：

div.logobox {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
background-color: #d2d2d2;
font-family: 'Source Sans Pro', sans-serif;
display: block;
float: left;    
}

父级：

.parentdiv {
 position: relative;
 height: 100%; }

徽标 div：

div.logo {
display: inline-block;
margin: 10px;
width: 200px;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease; }

要在调整大小时更改 .infobox 的高度，请将此 javascript 添加到页面中的脚本标记中：

    $(document).ready(function() {
 $(window).on("resize",function() {

      var bodyheight = $(document).height();

      $(".parentdiv").height(bodyheight);
 });});

Answer 2

尝试如下改变

.infobox {
    width: 30%;
    height: 100%;
    background-color: #ebebeb;
    text-align: center;
    display: inline-block;
    float: left;
    min-width: 350px;
   /*additional*/
    position: absolute;
    left: 0;
}
.logobox {
    width: 70%;
    height: 100%;
    background-color: #d2d2d2;
    font-family: 'Source Sans Pro', sans-serif;
    display: block;
    float: right;/*left to right*/
}

希望有帮助