Question

我希望屏幕尺寸减小时，#content上会出现溢出滚动条。

使用Firefox时，背景不会覆盖滚动条右侧的内容。

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

EDIT。下面是显示我想要的外观的图像。请注意#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

将min-width添加到#wrapper。它不仅适用于IE和Chrome，FF还将涵盖所有内容。

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

https://output.jsbin.com/nuholiguso

CSS溢出浮动DIV

1 个答案: