我在一个致命的简单CSS布局中有三列。它们看起来很完美,直到将内容添加到其中一个内容,从而迫使页面滚动(向下滚动小提琴)。
我想要的只是红色框总是转到页面底部(不是窗口/屏幕,页面)。如何用CSS实现这一目标?
.column
{
background-color: red;
width: 400px;
/* Page height minus header */
min-height: calc(100% - 192px);
/* Align to bottom of the page */
position: absolute;
top: 192px;
}
/* Half the page width minus (1.5 columns + offset between columns) */
.left { left: calc(50% - 630px); }
.right { right: calc(50% - 630px); }
/* Half the page width minus 0.5 columns */
.center { left: calc(50% - 200px); }
答案 0 :(得分:1)
关于这一直存在一些问题和问题,并且有很多方法可以解决这个问题,但是最容易的,因为你使用绝对定位,它将“列”div包装在“center”div中。
<div class="column center">
<div class="column right"></div>
<div class="column left"></div>
</div>
这允许左右div延伸到父亲的100%,即中心。对于css的一些细微更改,正如您在小提琴中看到的那样,对于包含的列,例如height: 100%
和top: 0
,因为父级对于子级被视为0。
答案 1 :(得分:0)
我希望我理解你想要达到的目标。
我已使用overflow: scroll;
,因此您不会丢失内容(如果您想要或隐藏,您可以将其设置为仅Y)。
我还使用了height
,因为min-height
overflow
没有触发
.column
{
background-color: red;
width: 400px;
/* Page height minus header */
height: calc(100% - 192px);
/* Align to bottom of the page */
position: absolute;
top: 192px;
overflow: scroll;
}