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

Question

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

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

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

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

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

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

Answer 1

您可以使用提到的 flexbox，或像这样的容器的新 css:

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

对于您的 Logo 容器 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%; }

Logo 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);
 });});