我有困难使我的页脚背景 colored颜色 跨越整个视区.希望有人能为我指明正确的方向!谢谢!

[![页脚背景色未覆盖整个视区](https://i.stack.imgur.com/EhWF4.png)](https://i.stack.imgur.com/EhWF4.png)

<footer>
    <div id="top-footer">
        Hong Kong
    </div>
    <div id="bottom-footer">
        <a href="https://support.google.com/websearch/?p=ws_results_help&hl=en-HK&fg=1">Help</a>
        <a href="https://policies.google.com/privacy?hl=en-HK&fg=1">Privacy</a>
        <a href="https://policies.google.com/terms?hl=en-HK&fg=1">Terms</a>
    </div>
</footer>
        #top-footer, #bottom-footer {
            
            margin: 0;
            padding: 1rem 2rem;
            height: 1rem;
            font-size: medium;
            
        }
        #bottom-footer > a {
            display: inline;
            padding-right: 2rem;
            margin: 0;
            font-size: medium;
        }
        footer {
            margin-top: 2rem;
            background-color: grey;
            width: 100%;
        }

推荐答案

要删除body的默认页边距,只需添加:

body {
  margin: 0;
}

您的新css样式:

body {
  margin: 0;
}

#top-footer,
#bottom-footer {

  margin: 0;
  padding: 1rem 2rem;
  height: 1rem;
  font-size: medium;

}

#bottom-footer>a {
  display: inline;
  padding-right: 2rem;
  margin: 0;
  font-size: medium;
}

footer {
  margin-top: 2rem;
  background-color: grey;
  width: 100%;
}

Html相关问答推荐

将容器水平偏离中心放置在桌面上;在移动设备上平稳地集中缩小规模

我的表的第一列似乎是推其他2列到右边,我不能改变它

需要帮助实现悬停动画效果

获得一个css框,以便在页面太小时不再粘在页面的角落.

为所有必填字段添加所需的占位符文本(Angular Material)

在Quarto/Discrealjs演示文稿中只增加一个列表的填充

在单独的容器之间堆叠上下文

当我关闭时,导航栏跳到了新的生产线

我正在try 向列表中的图像添加悬停,以放大图像并将div的不透明度设置为1而不是0

Vutify中看不见的V行

Django HTML标记-Merge for Loop with Conditional语句

水平行中按钮的垂直偏移

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色 ?

如何让一个 div 元素粘在另一个元素上?

标签背景 colored颜色 的 html 和 css 技巧说明

带有伪元素的不规则形状的渐变边框

如何清除html输入中的文本

在不扭曲图像的情况下将图像放入灵活的 Div 框内

弹出窗口溢出溢出:自动,我不明白为什么