如何刪除頁面上的滾動條

在具有以居中對齊的一個「div」的網頁上工作。我經歷了一堆方法，試圖按照我想要的方式工作，最終找到了最接近的方法。我有一個工作演示在這裏如何刪除頁面上的滾動條

我唯一的問題是，現在是，即使內容不佔用網頁的全部內容，但它仍然增加了一個滾動條。我想知道是否有刪除？我相信它與使用「div」居中的jQuery方法有關。

的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%; 
}

來源

2016-07-25 0x3C

設置溢出隱藏可以解決滾動條不會出現，但在這種情況下，它可能不完全垂直居中。

相反，你可以不設置填充上的所有元素，像你

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

做它使你的身體元素。內容，包裝有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樣式重置設置所有元素的邊距和填充。谷歌爲它。然後僅對您真正需要的元素應用填充。

來源

2016-07-25 22:23:11

當我從課堂上回家時，我會更徹底地檢查這一點，但它在jsfiddle演示中起作用！我剛剛從之前看到的一個前面的stackoverflow答案中複製了樣式表，所以我沒有完全注意。我今晚晚些時候再評論。謝謝。 – 0x3C

我看了一下'溢出'註釋和這個，你的是真正的解決方案。所以這不是隱藏滾動條的問題，這是一個關於我如何擁有所有樣式的CSS問題。謝謝你向我展示了什麼是錯的！ – 0x3C

body{ 
    overflow: hidden; 
}

只有垂直：

body{ 
    overflow-y: hidden; 
}

僅水平：

body{ 
    overflow-x: hidden; 
}

可能重複：Hiding the scrollbar on an HTML page

來源

2016-07-25 22:14:11 Hodrobond

它確實刪除了滾動條，但如果我僅使用垂直，它也會混亂我的垂直居中。我沒有檢查整體溢出，所以這可能已經工作。初步測試表明卡米爾扎雅克有正確的迴應。稍後進行更新並以完全溢出再次測試。 – 0x3C

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

這是你的updated demo

來源

2016-07-25 22:14:13

設置爲隱藏;這可能會解決它。

來源

2016-07-25 22:23:51 andy

如何刪除頁面上的滾動條

回答

相關問題