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

Question

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

我只是想在 header 下将页面一分为二，左边是信息框，右边是灵活的徽标网格。

问题是当我添加太多徽标时，页面变得比原来的 100% 长，信息框在底部被剪短，徽标开始出现在它下面。你大概能在页面上明白我的意思。

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

我不能将徽标网格放在它自己的 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;    
}

parent div:

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

徽标divs:

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*/
}

希望对您有所帮助

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

Make a div extend all the way down on my page?

css

responsive-design

position

grid-layout

portfolio