无法将div固定在网站底部的技术问题求助

你的问题源于以下几个布局细节错误：

• body未设置position: relative，导致绝对定位的.svgmenu_dev相对于视口而非body定位，加上浏览器默认的body边距，造成偏移。
• 底部div使用固定宽度1366px，无法自适应不同屏幕宽度，且在窄屏会超出可视区域。
• 头部Edrv1v同样采用固定宽度，不符合响应式要求。
• .svgmenu_dev内的选择器写法错误，无法正确应用样式到两个链接。

修复后的CSS代码 #

@font-face {
  font-family: Open-Sauce-One;
  src: url("OpenSauceOne-Bold.ttf") format("truetype");
}

@font-face {
  font-family: Archivo-Black;
  src: url("ArchivoBlack-Regular.ttf") format("truetype");
}

body {
  display: flex;
  background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(153, 153, 153));
  height: 100vh;
  margin: 0; /* 移除浏览器默认边距 */
  position: relative; /* 让绝对定位子元素基于body定位 */
}

div.Idrv2v {
  position: relative;
  left: 5%;
  bottom: 15px;
  width: 250px;
}

div.Edrv1v {
  position: absolute;
  background-color: #B4ADAD;
  max-width: 100%;
  height: 95px;
  padding: 1px;
  top: 0;
  left: 0;
  right: 0; /* 自适应铺满宽度 */
}

#titlelogo {
  font-family: Open-Sauce-One, "Comic Sans MS", sans-serif;
  font-size: 35px;
  color: #301111;
}

#subtitlelogo {
  font-family: Archivo-Black, "Arial Black", sans-serif;
  font-size: 18px;
  position: relative;
  bottom: 28px;
  color: #302e2e;
}

.svgmenu_dev {
  background-color: gray;
  max-width: 100%;
  position: absolute;
  height: 90px;
  bottom: 0;
  left: 0;
  right: 0; /* 自适应铺满宽度，固定在底部 */
}

.svgmenu_dev #svgmenudev1,
.svgmenu_dev #svgmenudev2 { /* 修复选择器，正确选中两个独立链接 */
  font-family: Open-Sauce-One, "Comic Sans MS", sans-serif;
  font-size: 10px;
  position: absolute;
}

修复后的HTML代码（无需修改） #

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>CoinCot</title>
  <link href="css-data/styles.css" rel="stylesheet">
  <meta name=viewport content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="Edrv1v">
    <div class="Idrv2v">
      <h1 id="titlelogo"> CoinCot.com </h1>
      <h2 id="subtitlelogo">A simple and efficient quotes website.</h2>
    </div>
  </div>
  <div class="svgmenu_dev">
    <a href="https://iconscout.com/icons/menu" target="_blank" id="svgmenudev1">Menu Icon</a> by <a href="https://iconscout.com/contributors/rengised" target="_blank" id="svgmenudev2">Alex Martynov</a>
  </div>
</body>

</html>

关键修复点说明：

1. 消除默认边距：body { margin: 0; }解决了浏览器自带的边距导致的布局偏移。
2. 定位上下文：body { position: relative; }为绝对定位的子元素提供正确的定位基准，确保底部div固定在body底部而非视口。
3. 自适应宽度：移除固定宽度1366px，通过left: 0; right: 0;让头部和底部div自动铺满屏幕宽度，适配不同设备。
4. 选择器修正：将.svgmenu_dev #svgmenudev1 #svgmenudev2改为逗号分隔的选择器，确保两个链接都能应用样式。

内容的提问来源于stack exchange，提问作者Slime ScienceBoy