Полноразмерный div, который не вызывает полосы прокрутки

Я пытаюсь сделать элемент div, который имеет ту же ширину, что и экран, чтобы я мог иметь часть фона другого цвета, чем остальные. Я бы предпочел, чтобы это было с относительным положением, потому что с абсолютным я должен вручную установить его вертикальную позицию, и это будет беспорядочно, хотя полоса прокрутки не появится.Полноразмерный div, который не вызывает полосы прокрутки

Прямо сейчас у меня есть это, так что div будет занимать область экрана и может быть другого цвета, но это вызывает появление полосы прокрутки. ДИВ находится над правой стороне экрана с помощью

margin-right: -21px;

но вызывает скроллбар. Если я удалю это, панель уйдет, но в правой части экрана есть часть пробелов. Использование

overflow-x: hidden;

скроет скроллбар, но не помешает прокрутки по горизонтали.

Как это сделать, чтобы полоса прокрутки не отображалась, и я не могу прокручивать ее по горизонтали? У меня есть JSFiddle для того, что я сейчас использую.

Благодарим вас за любые предложения по устранению этого.

источник

2013-12-14 Zalerinian

Хотя есть несколько вещей, которые вы должны исправить, удалив маржу от тела, HTML будет делать трюк.

Избавьтесь от полей -21 и просто добавьте этот стиль.

body, html { 
    margin: 0; 
}

Адрес fiddle.

источник

2013-12-14 21:20:49 crad

Ого, это было действительно так просто? Я попытался использовать html {margin: 0px;}, но это не сработало. Я полагаю, что часть px могла вызвать проблему? Во всяком случае, большое спасибо, что устранило мою проблему. – Zalerinian

@ Zalerinian no, но вы удалили его только из элемента '', но не из ''. «margin: 0» и «margin: 0px» эквивалентны. – janfoeh

грязный трюк, который может работать:

<!DOCTYPE html > 
<html> 
    <head> 
    <title> Bla! </title> 
    <style> 
     div.fullWidth { display:inline-block; width:100%; background-color:yellow } 
     div.body { position:absolute; left:0px; top:0px; background-color:green; width:100%; height:100%; overflow:auto} 
     body { overflow:hidden; } 
    </style> 
    </head> 
    <body> 
     <div class='body'> 
      line before the div 
      <div class='fullWidth'> Line inside div</div> 
      line after div 
     </div> 
    </body> 
</html>

источник

2013-12-14 21:13:19

Полноразмерный div, который не вызывает полосы прокрутки

ответ

Смежные вопросы