[英]How to remove scroll bar on page
使用一個以“ 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%;
}
body{
overflow: hidden;
}
僅垂直:
body{
overflow-y: hidden;
}
僅水平:
body{
overflow-x: hidden;
}
可能重復: 將滾動條隱藏在HTML頁面上
html,
body {
position: fixed;
top:00;
left:0;
bottom:0;
right:0;
}
這是您更新的演示
將溢出設置為隱藏可能會解決滾動條不出現的問題,但在這種情況下,滾動條可能不會完全垂直居中。
相反,您不能像對那樣對所有元素設置填充
* {
margin: 0;
padding: 10px;
}
它會使您的body元素和.content-wrapper具有額外的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。 然后,僅對您真正需要的元素應用填充。
將溢出設置為隱藏; 這可以解決。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.