程序员经验分享-hwhale

CSS3 渐变背景，底部有不需要的空白

2024-02-22

当我应用 CSS3 渐变并且内容的高度不足以容纳滚动条时，我很难摆脱底部的空白。

比如这里：http://womancareolympia.webs.com/ http://womancareolympia.webs.com/

我尝试过将 html 和 body 高度设置为 100% 或自动。我可以通过这种方式使渐变到达底部，但是当内容需要滚动条时，内容会流过渐变。

谢谢您的帮助！


  • Add min-height: 100% to body.
  • 删除所有实例padding-top from body（或以其他方式将其设置为0).
  • Set top: 129px on #fw-container.
  • Set margin-bottom: 110px on #fw-container.
  • Add overflow: hidden to #fw-foottext.

（仅在 Chrome+Firefox 中测试）

我确实认为你应该重新设计你的CSS不使用像这样的东西top: 100px and margin-top: -50px到处都是。没有理由。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

whitespace

gradient

CSS3 渐变背景，底部有不需要的空白 的相关文章

  • Bootstrap 3 按钮之间的空间

    如果我将几个 Bootstrap 3 按钮排成一行

  • 如何让更大的布局适合小设备屏幕？

    我有一个小问题meta viewport元素 问题是我的布局min width比我想要使用的许多屏幕分辨率都要大 所以将其设置为 没有帮助 结果我得到的页面必须缩小以适应设备宽度 如果我什至添加像 它也不起作用 发现了一个黑客来自CSS 技

  • 是否可以全局文本对齐表列而不在每行中指定类？

    想知道提高效率的最佳方法是什么 也许使用 jQuery 我可以接受不兼容 ie7 的解决方案 如果需要的话 即使缺乏对 ie8 的支持也可以 table th td class cal center td td left td td cla

  • 如何隔离 Vuetify 全局样式

    我已经开始在旧的现有项目中将 Vue js 与 Vuetify 结合使用 所以我没有重写所有前端 我只是导入了Vue并替换了一些部分 然后我注意到一个非常意想不到的行为 Vuetify 具有常见类的全局样式 例如 title它不仅影响整个页

  • CSS 属性选择器中的 [att~=val] 与 [att*=val] 有何不同？

    也许我错过了一些东西 但它们看起来很相似 例如 如果您使用 a alt thumb or a alt thumb 我可以通过哪些不同方式缩小选择范围 我的理解是 为您提供了引号中的部分匹配 而 为您提供了部分匹配 我将稍微修改一下代码 但由

  • 如何强制 中的两个元素始终保持在同一行

    代码非常简单 table style width 100 border 0 background color white cellpadding 0 cellspacing 0 tr td style border 0 padding 0

  • ie11 中的 SVG 问题

    我有一个 div 其高度设置为 320 像素 然后它的子元素宽度设置为 100 它的子文件是一个 SVG 文件 我将其宽度设置为容器的 200 在运行良好的 Chrome 和 Firefox 中 我得到了如下所示的漂亮图像 HTML 看起来

  • 使用 Flexbox 时 Apex 图表无法正确调整大小

    最近 我将 Floats 更改为 FlexBox 以便更轻松地使用面板 正如我在其他问题上所建议的那样 虽然大多数事情都按我的预期工作 但更改后我在使用 Apex Charts 时遇到了问题 完整代码在这里 https github com

  • 当位置从相对固定变为固定时，div 的宽度会发生变化

    当 div topNav 的位置样式从相对更改为固定时 其宽度会更改几个像素 我找到了一个 jquery 插件 http imakewebthings github com jquery waypoints 它可以优雅地执行我正在寻找的相同

  • BS3 - img 响应类 - 为什么没有最大高度？

    引导程序 3 包括 img responsive班级 应用这些 css 设置 display block height auto max width 100 为什么没有max height 100 我发现添加这个使得图片的高度也适合 但我不

  • css 变换，chrome 中的锯齿状边缘

    我一直在使用 CSS3 转换来旋转网站中带有边框的图像和文本框 问题是 Chrome 中的边框看起来呈锯齿状 就像没有抗锯齿的 低分辨率 游戏一样 在 IE Opera 和 FF 中看起来好多了 因为使用了 AA 仍然清晰可见 但也没有那么

  • Bootstrap 响应式图像缩放

    Using Twitter Bootstrap我意识到默认情况下它会响应式地缩放图像 这很棒 但并不总是完美的 比如说我有一个500x300桌面上的图像 然后它会针对移动设备调整大小 该图像将非常小而且不是很高 会丢失图像的大部分细节部分

  • 获取脚本中 CSS 颜色属性的实际值

    当我使用window getComputedStyle在元素的颜色属性上 它返回一个带有rgb or rgba 值 无论最初用于设置颜色的语法如何 在 Internet Explorer 中 当被迫使用element currentStyl

  • 为什么明确：正确的方法没有按预期工作

    我总是很困惑clear left clear right and clear both在CSS中 我知道clear both意味着它不允许在其两侧浮动元素 我做了一些测试here http jsfiddle net malaikuangre

  • ASP.Net MVC：如何在 CSS 文件中使用 razor 变量

    根据我的场景 我需要存储这个路径 img 产品 pngrazor 变量中的图像 后来我想在 CSS 文件中使用该 razor 变量 下面的css代码在css文件中 test background url img product png no

  • 显示地址栏时的 100vh 高度 - Chrome Mobile

    I came across this problem a few times and was wondering if there was a solution to this problem My problem occurs on th

  • 仅使用 CSS 创建三列表？ （无表格元素）

    我正在为 Django 项目创建模板 并且我需要在 HTML 中创建一个三列表 仅使用 CSS 而不是使用 table 元素 除了意识形态上对表格的反对之外 原因还在于该报告需要在台式机和黑莓等手持设备上查看 在手持设备上 我们的目标不是试

  • 四列布局，无需媒体查询即可转换为单列

    我正在尝试创建一个四列布局 其中每列随着窗口的大小而增大和缩小 但每列都有最小宽度 当窗口太小而无法将所有四列放入单行时 它会转换到单个列 每个部分占据整个宽度 我无法使用 flex box 或 CSS 网格来做到这一点 我想在没有媒体查询

  • chrome 中的 Flexbox flex-flow 列换行错误？

    当使用列换行作为弹性流时 它似乎会对 chrome 中的容器尺寸造成问题 HTML 示例 div class root div class outer div class inner A div div class inner B div

  • 是否可以通过样式表进行跨域攻击？

    我需要为我的 Web 应用程序的用户创建的网页实现灵活的样式系统 理想情况下 我希望允许他们使用 CSS 正在链接到用户定义的 url 处的样式表Bad Idea Why 可以安全地做到这一点吗 您对此有何看法 我试图避免构建样式 编辑器

随机推荐

热门标签