Question

我有这个固定的右侧栏布局很长时间适合我，它也适用于大多数浏览器和设备。

但最近几天前发生的Chrome更新到45，通过添加水平滚动条打破了布局。

有不同的方法来实现固定的右侧栏布局，但是这种布局需要将主列和侧栏的背景颜色扩展到浏览器宽度范围，并使用固定的最大宽度容器（标记为红色）和阴影之间列。

以下代码是我实现它的最佳方式。

现在我需要的只是Chrome 45中没有滚动条，我尝试了不同的方法来避免它，但没有一个工作。我知道这不是一个简单的解决办法，但对此的任何帮助都将受到赞赏。

HTML

<div class="container" style="background:#000; color:#fff; text-align:center">
        ------page content max width for reference ----
    </div>
    <div class="page-cols">
        <div class="container ">
            <div class="cols-wrap">
                <section class="main-col">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ipsum sapien, tincidunt ac augue sodales, consequat sodales elit. Nunc pharetra eget velit sed pharetra.
                </section>
                <aside class="aside-col">
                    <div class="pack">
                        Sed luctus nisl ut ipsum scelerisque semper. Nullam euismod eros vitae odio viverra tristique. Nam pulvinar massa at diam congue, vitae fringilla neque varius. In molestie quis neque luctus facilisis.

                        Vestibulum sit amet mi ut odio condimentum dictum vel a metus. Morbi ultrices enim ut accumsan lacinia. Praesent augue purus, bibendum in odio in, pharetra consectetur mi. Vivamus ac arcu dignissim, placerat ipsum eu, tempor magna. Integer nec ipsum dui. Quisque at diam est. Aliquam ut placerat ligula, eu venenatis turpis. Sed nec eros vel ante ornare eleifend. Suspendisse aliquam nulla consectetur tellus molestie efficitur.
                    </div>
                </aside>
            </div>
        </div>
    </div>

CSS

body{
    font-family: arial;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    overflow-y: scroll;
    margin:0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
.container:after,
.cols-wrap:after,
.page-cols:after{ 
    clear: both; 
    content: ""; 
    display:table; 
}

.container{
    margin: 0 auto;
    max-width: 1200px;
    min-width: 300px;
    padding:0 10px;
    position: relative;
}

.page-cols{
    background-color: #999;
}
.cols-wrap{
    width: 100%;
    position: relative;
    background-color: #ccc; /*this can be #fff too to match body bg*/
    box-shadow: 10px 10px 10px -10px #000;
    right: 320px;
}
.cols-wrap .main-col{
    float: left;
    left: 320px;
    position: relative;
    width: 100%;
    padding-right: 340px;
}
.cols-wrap .aside-col{
    float: right;
    position: relative;
    width: 320px;
    margin-right: -320px;
    padding-left: 20px
}

水平滚动条，用于Chrome 45

0 个答案: