2015-09-15 3 views
2

Мое желание - когда размер экрана уменьшается, на #content появляется полоса прокрутки переполнения.Переполнение CSS с плавающим DIV

Он делает это с Firefox, однако фон не охватывает контент справа от полосы прокрутки.

Кроме того, IE и Chrome одновременно нажимают #content и даже не показывают полосу прокрутки.

EDIT. Ниже приведен образ, показывающий мой желаемый внешний вид. Обратите внимание: #content имеет полосу прокрутки.

enter image description here Как это осуществить?

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>

+0

использование 'Переполнение-х: auto' для горизонтального переполнения. Также, чтобы вызвать его при небольшом размере экрана, вы можете использовать медиа-запросы. –

+0

@PetrosKyriakou 'overflow-x: auto' не имеет другого эффекта. Первоначально я думал, что это будет уместно, но больше не знаю. Никогда ранее не слышал о https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries и будет исследовать. Тем не менее, ничего не работает с IE и Chrome. – user1032531

+0

Трудно сказать, чего вы пытаетесь достичь. Вы пытаетесь иметь горизонтальный свиток или верительный? '# content' имеет фиксированную ширину, что приводит к ее разрыву при меньшем размере экрана. Дайте ему максимальную ширину и избавьтесь от поплавка, чтобы избавиться от коллапсирующего поведения, но не уверен, что это то, что вы ищете. – RooWM

ответ

0

Добавить 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