Question

我在Wordpress中使用Divi主题（优雅主题）制作网站。我一直试图摆脱页脚下的白色空间，但一直没有成功。我尝试应用Sticky Footer CSS并尝试在页脚ID，html和正文中使用不同的填充/边距。该网站是thedaltondaleygroup.org。

我创建了一个带有divi builder的页面，然后将修订版中的短代码复制到页脚区域＃1。

这是我尝试过的css代码，这是尝试应用粘性页脚css：

html, body {
  height:100%;
}
#main-content {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
#main-content:after {
  content: "";
  display: block;
}
#main-footer, #main-content:after {
  height: 142px; 
}    
.et_pb_gutters3 .footer-widget {
  margin: 0 .5% 3% 0; */
}

如果有任何相互矛盾的内容，请查看我为页脚编写的其余代码：

#main-footer {
  box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.3);
  padding-bottom:1%;
}    
.et_pb_row .et_pb_row_3 .et_pb_gutters2 .et_pb_row_fullwidth et_pb_row_1-2_1-4_1-4 {
  width:100%;
  max-width:100%;
}

#footer-bottom .container, #main-footer .container{
  margin-right: 2.773%; 
  margin-left: 2.773%; 
  width:94.454%!important;
  max-width: 94.454%;
}
#main-footer .fwidget.et_pb_widget {
  width: 100%!important;
  max-width: 100%!important;
}
#footer-widgets .footer-widget li:before {
  display: none; 
} 

html #footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
  line-height: 26px; 
  padding-left: 0px; 
}

#footer-widgets {
  text-align: center;
  color: #ffffff;
  padding-top: 2%;
  width: 100%;
  height: auto;
}

:not(.et_pb_fullwidth_section).et_pb_section { 
   padding-top: 0px !important; 
   padding-bottom: 0px !important;
}

#footer-bottom {
   padding: 0;
}

#main-footer {
  width: 100%;
  height:auto;
}

/* Footer Columns - Centered */

.footer-widget { margin-right: 0; text-align:center;}
.footer-widget:nth-child(1) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 32%; margin-right:0;}
.footer-widget+.last{display:none;}

@media only screen and (max-width: 980px){
.footer-widget:nth-child(1) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 30%; margin-right:0;}}

@media only screen and ( max-width: 767px ) {
.footer-widget:nth-child(1) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 100%; margin-right:0;}}

Answer 1

在我编写任何css代码之前，我通常输入html，body，p，h1，h2 {margin：0; padding：0;} etcc ...这通常会为我修复，

或者你可以谷歌一个CSS重置页面，他们有大部分预先写好的... 希望这有帮助。

使用Divi主题无法在Wordpress网站上的页脚下摆脱空白区域

1 个答案: