带有浮动DIV的CSS溢出

Question

我的愿望是当屏幕尺寸减小时，#Content上会出现溢出滚动条。

它在Firefox上是这样做的，然而，背景并没有覆盖滚动条右侧的内容。

此外，IE和Chrome都向下推#content，甚至不显示滚动条。

编辑下面的图片显示了我想要的外观。请注意，#content有一个滚动条。

https://output.jsbin.com/huwagajome

                body,div {margin:0;padding:0;}
    
                #header { height:60px; background:url(http://s1.postimg.org/e250ntgmz/header.png) repeat-x #e2e2e2;}
                #footer { height:60px; background:url(http://s8.postimg.org/3td1ckaph/footer.png) repeat-x #e2e2e2;}
    
                #wrapper {
                    background-image:url(http://s24.postimg.org/781yqtfdh/background2.jpg);
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    height:840px;
                }
                #sidebar {
                    background: rgba(255, 255, 255, .3);
                    border-right: 4px solid #f15a29;
                    height:100%;
                    width:50px;
                    float:left;
                }
                #sidebar p {
                    -webkit-transform: rotate(-90deg);
                    -moz-transform: rotate(-90deg);
                    -o-transform: rotate(-90deg);
                    -ms-transform: rotate(-90deg);
                    transform: rotate(-90deg);
                    position: relative;
                    top: 50%;
                    font-size:30px;
                    white-space: nowrap;
                }
    
                #content {
                    margin:0 auto;
                    padding-top:45px;
                    width: 960px;
                    height:100%;
                    /*overflow-x:auto;*/
                    overflow:auto;
                    /* position:relative; */
                    /* clear:both; */
                }

            <div id="header"></div>
            <div id="wrapper">
                <div id="sidebar"><p>Sidebar</p></div>
                <div id="content">
                    Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option incorrupte, sit unum pertinax theophrastus ut.
    
                    Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis.
    
                    Nam te tamquam omittam, eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci. In paulo disputationi ius, vide dissentias sadipscing eos cu.
    
                    Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam. Facilisis repudiare conceptam sit an.
                </div>
            </div>
            <div id="footer"></div>

Answer 1

将最小宽度添加到#包装。它不仅可以与IE和Chrome一起使用，FF还可以覆盖所有内容。

#wrapper{min-width:  1015px;/*960px(content)+50px(sidebar)+ a little extra for good measures*/}

https://output.jsbin.com/nuholiguso