Как удалить полосу прокрутки на странице

Question

Работа на веб-странице, которая имеет один «div», который выровнен как центр. Я прошел через кучу методов, чтобы попытаться заставить его работать так, как я хочу, и, наконец, нашел ближайший. У меня есть рабочая демо здесь

FIDDLE

Моя единственная проблема с ним прямо сейчас, что даже тогда, когда содержание не занимает весь контент страницы, он все еще добавляет полосу прокрутки. Мне интересно, если это все равно, чтобы удалить это? Я считаю, что это связано с методом jQuery по центрированию «div».

Javascript:

$(function() { 
    jQuery.fn.center = function() { 
    this.css("position", "fixed"); 
    this.css("top", ($(window).height()/2) - (this.outerHeight()/2)); 
    this.css("left", ($(window).width()/2) - (this.outerWidth()/2)); 
    return this; 
    } 

    $('#myDiv').center(); 
    $(window).resize(function() { 
    $('#myDiv').center(); 
    }); 
}); 

CSS

* { 
    margin: 0; 
    padding: 10px; 
} 

html, 
body { 
    height: 100%; 
} 

body { 
    font-family: 'Josefin Sans'; 
    text-align: center; 
} 

p { 
    font-size: 18px; 
    margin: 0 0 0.5em; 
} 

.centered-wrapper { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    min-height: 100%; 
} 

.centered { 
    background: #ccc; 
    border-radius: 8px; 
    margin: 0 auto; 
    padding: 20px; 
    width: 85%; 
} 

Answer 1

Установка переполнение скрытый может решить не появляется полоса прокрутки, но в этом случае она не может быть полностью вертикально по центру.

Вместо этого, вы не можете установить отступы по всем элементам, как вы делаете с

* { 
    margin: 0; 
    padding: 10px; 
} 

Это делает ваше тело элемента и .content-обертку, чтобы иметь дополнительные отступы 10px, который добавляет к его высоте и делает скроллбар появится, если вы установите для этого дополнения значение 0, полоса прокрутки исчезнет, ​​проверьте свою скрипку.

Так для примера вы можете установить CSS как

body, html { 
    margin: 0; 
    padding: 0; 
} 

p, h1, h2, h3, h4, span, br, hr { 
    margin: 0px; 
    padding: 10px; 
} 

html, 
body { 
    height: 100%; 
    margin: 0; 
} 

body { 
    font-family: 'Josefin Sans'; 
    text-align: center; 
} 

p { 
    font-size: 18px; 
    margin: 0 0 0.5em; 
} 

.centered-wrapper { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    min-height: 100%; 
} 

.centered { 
    background: #ccc; 
    border-radius: 8px; 
    margin: 0 auto; 
    padding: 20px; 
    width: 85%; 
} 

/* 
Button 
*/ 

.btn { 
    -webkit-border-radius: 8; 
    -moz-border-radius: 8; 
    border-radius: 8px; 
    font-family: Arial; 
    color: black; 
    font-size: 18px; 
    background: #ccc; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
    outline: none; 
} 

.btn:hover { 
    background: #bbb; 
    text-decoration: none; 
    } 

В этом случае скроллинга не появится.

Вместо установки полей и прокладок на все элементы с помощью * используйте что-то вроде сброса стиля CSS. Google для этого. Затем применяйте дополнение только к тем элементам, которые вам действительно нужны.

Answer 2

body{ 
    overflow: hidden; 
} 

Вертикальная только:

body{ 
    overflow-y: hidden; 
} 

Горизонтальные только:

body{ 
    overflow-x: hidden; 
} 

Возможный дубликат: Hiding the scrollbar on an HTML page

Answer 3

html, 
body { 
    position: fixed; 
    top:00; 
    left:0; 
    bottom:0; 
    right:0; 
} 

Вот ваш updated demo

Answer 4

set overflow to hidden; это может решить проблему.