javascript – 3列,第三列具有流体宽度,固定位置

2019年8月4日 138次阅读

我想做这个简单的布局：

> 3列左右位置：固定,因为向下滚动时,左右两侧应保持静止
>我们知道左栏宽= 200px
>我们知道中间列宽= 400px
>我们不知道正确的列宽,它应该是流动的(即填充屏幕宽度的其余部分或零)

这是我的样本(但col3的宽度为100px).所以问题是如何修复col3的CSS以使其流畅但仍保留位置：固定？

http://jsfiddle.net/Endt7/1/

我的最后一个选择是使用jQuery.但我不想触摸它,除非布局真的有必要.

谢谢.

最佳答案 对于绝对/固定定位元素,宽度是左和右的函数.所以,设置左：600px;右：0;在第三列和浏览器将确定宽度.这就对了.这是经过修改的CSS,对一致性几乎没有变化：

.col1 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    background: red;
}
.col2 {
    margin-left: 200px;
    width: 400px;
    height: 100%;
    background: green;
}
.col3 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 600px;
    right: 0;
    background: blue;
}

Demo here

点赞