css - 如何删除 Wordpress 页脚下的空白区域?

标签 css wordpress wordpress-theming editing removing-whitespace

我有基本的编码经验。在我安装的 Wordpress 中,我的一些页面在页脚下有一个空白区域,我想将其删除。我尝试了几种解决方案但无济于事。该问题在 chrome、Firefox、IE 等上一直存在。

我不太确定原因,但空白的大小会根据计算机/浏览器/分辨率而变化。

因为我在 Wordpress 中工作,所以我可以访问自定义 CSS 和源主题文件,但是,我更愿意使用自定义 CSS 来解决这个问题。

我想要一个固定在浏览器窗口底部且下方没有空格的页脚。

问。请向我提供代码/解决方案,以删除我网站页脚下方的空白区域(最好是自定义 CSS 方法)。

您可以在我的 website here 上找到空白的示例. (尝试在高于 1280x800 的浏览器分辨率上查看)

我尝试过的解决方案:

  1. #footer {overflow: hidden;} 无效

  2. 放置 html, body, parentDiv, childDiv, section, footer { height : 100%; 在我的 css 中,但那没有用

  3. #copyright { padding-bottom: 20px;} “#copyright”在页脚下面,所以这确实将空白减少到似乎不存在的程度,但是在更高的浏览器窗口上,空白再次出现。

最佳答案

页脚下方有空白,因为内容不足以将其推过高分辨率的显示器底部。

我建议使用 Sticky Footer 来处理这个。它允许正文的最小高度为浏览器的高度,无论页面中的内容有多少。

粘性页脚解决方案需要包含一些特定的 HTML 和一些基本的 CSS。这是一个 Fiddle Ryan Fiat的粘性页脚使用他的示例中的代码进行操作。

代码是这样的:

HTML:

<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Footer content here</p>
    </div>
</body>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
    background-color:#eaeaea;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
    border:solid 1px red;
}
.footer, .push {
    height: 155px; /* '.push' must be the same height as 'footer' */
}
.footer {
    border:solid 1px blue;
}

查看您的标记,您可以使用现有的 div class="clear"></div>作为你的.push div,那么你只需要添加div class="wrapper">围绕你的内容。

关于css - 如何删除 Wordpress 页脚下的空白区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25253425/

相关文章:

css - 是否有用于显示 : table, 表行、表单元格等的任何 polyfill

jquery - 将 css 应用于页面内的 jquery 移动元素

wordpress - 谁能发现我的Wordpress循环为何中断其后的所有“高级自定义字段”代码?

php - Wordpress 显示页面内容和循环?

css - 在某个断点处,同一页面上 2 个砖石容器的内容开始重叠

html - 自动保存对 Chrome 开发工具中现有样式所做的 CSS 更改?

javascript - 如果我在输入类型文本中写东西,请选中复选框

php - 将图像链接更新为自己的 URL

css - 尝试在 WP 中正确注册和排队样式表,但没有呈现任何内容

html - 将字体规范从 Adob​​e XD 复制到 html/css