如何将绝对定位元素宽度设置为父节点宽度？

Question

在那个描述之后。 (CodePen link )

要查看问题，请将鼠标悬停在“manimonji”上，您可以看到一个下拉列表，但是列表的第二行宽度与父宽度不相等（第二行的位置是绝对的）。
注意：为了解决这个问题，我尝试了宽度 100%。但是不行。

JS 文件

<!-- begin snippet: js hide: false console: true babel: false -->
    $(document).ready(function(){
      $(".profile-name").mouseenter(function(){
        $(".profile-dropdown-cont li").css("border-color", "black");
        $(".profile-dropdown-cont li").show();
      });
      $(".profile-name").mouseleave(function(){
        $(".profile-dropdown-cont li").css("border-color", "transparent");
        $(".profile-dropdown-cont li").hide();
      });
    });

CSS 文件

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap");
    header,
    .footer-border {
      max-width: 100%;
      background: #1f1d21;
    }
    header{
      position: sticky;
      top:0;
    }
    body {
      margin: 0;
      background: #201e23;
    }
    .header-cont {
      width: 60%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }
    .icon {
      width: 50px;
      height: 50px;
      background: #1e1c21;
      border: 2px solid white;
      border-radius: 20px;
      margin: 15px 0;
      text-align: center;
      font-size: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
    }
    * {
      font-family: "Jost", sans-serif;
      color: white;
    }
    .menu-list {
      list-style: none;
      padding: 0;
      display: flex;
    }
    .menu-list > li {
      margin: 0px 0px 0px 20px;
      font-size: 20px;
      font-weight: 400;
    }
    .border {
      margin: 0 5px;
      border-bottom: 1px solid #161418;
    }
    .content {
      padding: 10px 0;
    }
    .content,
    .footer {
      max-width: 60%;
      margin: 0 auto;
    }
    .min-size {
      white-space: normal;
      width: fit-content;
    }
    .margin-fix {
    }
    p {
      text-align: justify;
      line-height: 27px;
    }
    footer {
      border-top: 1px solid #161418;
      margin: 0 5px;
      padding: 1px 0;
    }
    .footer > * {
      margin: 20px auto;
      width: fit-content;
    }
    .footer-border {
      position: relative;
      width: 100%;
      bottom: 0;
    }
    .copy-right {
      font-weight: 500;
      font-size: 20px;
    }
    .content-image {
      float: right;
    }
    .icons a *,
    .copy-right {
      opacity: 0.8;
    }
    .icons {
      display: flex;
    }
    .icons svg {
      margin-left: 20px;
      width: 30px;
    }
    a {
      text-decoration: none;
    }
    a *,
    a {
      transition: 0.5s;
    }
    a:hover *,
    a:hover {
      opacity: 1;
    }
    h1,
    p {
      margin: 10px 0;
    }
    .profile-cont {
      margin-left: auto;
      display: flex;
      align-items: center;
      height: 55px;
    }
    .profile-img {
      height: 55px;
    }
    .profile-name {
      display:unset !important;
      font-weight: 600;
    }
    .down-svg {
      padding-top: 5px;
      margin-left: 3px;
    }
    .profile-dropdown-cont{
      padding:0;
      list-style:none;
      cursor:pointer;
    }
    .profile-dropdown-cont li:first-child{
      position:relative;
      border-radius:5px 5px 0 0;
    }
    .profile-dropdown-cont li{
      padding:5px 10px;
      border:solid 1px transparent;
      margin-left: 10px;
      margin-top:5px;
      font-size: 20px;
      position:absolute;
      display:none;
      width:100%;
    }
    @media only screen and (max-width: 1175px){
      .header-cont,.content {
        max-width:80%;
        width:80%;
      }
    }
    @media only screen and (max-width: 900px){
      .header-cont,.content {
        max-width:90%;
        width:90%;
      }
    }

HTML 文件

<html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://kit.fontawesome.com/22f7b461fc.js" crossorigin="anonymous"></script>
    </head>
    <header>
      <div class="border">
        <div class="header-cont">
          <div class="icon"><span>D</span></div>
          <ul class="menu-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
          </ul>
          <div class="profile-cont">
            <img src="https://s6.uupload.ir/files/profile-pic_qqbw.png" class="profile-img">
            <ul class="profile-dropdown-cont" onclick="click()">
              <li class="profile-name">
                manimonji
                          <svg xmlns="http://www.w3.org/2000/svg" class="down-svg" width="14" height="14" stroke="white" stroke-width="2" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
              </svg>
              </li>
              <li>hi</li>
            </ul>
          </div>
        </div>
      </div>
    </header>

    <body>
      <div class="content">
        <h1 class="min-size">Feel The Darkness</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
        </p>
        <h1 class="min-size">Light Is Bad, Shadow Is Good</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
        </p>
        <h1 class="min-size">Color, LOL</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
        </p>
      </div>
      <div class="footer-border">
        <footer>
          <div class="footer">
            <div class="copy-right"> &copy; 2022 Mani Monji, All Rights Reserved</div>
            <div class="icons">
              <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
                  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
                </svg></a>
              <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
                  <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
              </a>
              <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
                </svg></a>
            </div>
          </div>
        </footer>
      </div>
    </body>
</html>

Answer 1

您需要将 position: relative; 设置为绝对定位元素的父级。这解决了你的问题。

此外，我在 li 上添加了 box-sizing: border-box;，还添加了 calc() 以正确计算宽度，因为 100% 不是指第一个 li，它是 ul 的父级。这意味着我们需要减去 lis 边距以获得正确的宽度。

作为旁注，您可以完全不用 JS 来完成此操作，只需使用 CSS :D

$(document).ready(function(){
  $(".profile-name").mouseenter(function(){
    $(".profile-dropdown-cont li").css("border-color", "black");
    $(".profile-dropdown-cont li").show();
  });
  $(".profile-name").mouseleave(function(){
    $(".profile-dropdown-cont li").css("border-color", "transparent");
    $(".profile-dropdown-cont li").hide();
  });
});

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap");
header,
.footer-border {
  max-width: 100%;
  background: #1f1d21;
}
header{
  position: sticky;
  top:0;
}
body {
  margin: 0;
  background: #201e23;
}
.header-cont {
  width: 60%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.icon {
  width: 50px;
  height: 50px;
  background: #1e1c21;
  border: 2px solid white;
  border-radius: 20px;
  margin: 15px 0;
  text-align: center;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}
* {
  font-family: "Jost", sans-serif;
  color: white;
}
.menu-list {
  list-style: none;
  padding: 0;
  display: flex;
}
.menu-list > li {
  margin: 0px 0px 0px 20px;
  font-size: 20px;
  font-weight: 400;
}
.border {
  margin: 0 5px;
  border-bottom: 1px solid #161418;
}
.content {
  padding: 10px 0;
}
.content,
.footer {
  max-width: 60%;
  margin: 0 auto;
}
.min-size {
  white-space: normal;
  width: fit-content;
}
.margin-fix {
}
p {
  text-align: justify;
  line-height: 27px;
}
footer {
  border-top: 1px solid #161418;
  margin: 0 5px;
  padding: 1px 0;
}
.footer > * {
  margin: 20px auto;
  width: fit-content;
}
.footer-border {
  position: relative;
  width: 100%;
  bottom: 0;
}
.copy-right {
  font-weight: 500;
  font-size: 20px;
}
.content-image {
  float: right;
}
.icons a *,
.copy-right {
  opacity: 0.8;
}
.icons {
  display: flex;
}
.icons svg {
  margin-left: 20px;
  width: 30px;
}
a {
  text-decoration: none;
}
a *,
a {
  transition: 0.5s;
}
a:hover *,
a:hover {
  opacity: 1;
}
h1,
p {
  margin: 10px 0;
}
.profile-cont {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 55px;
}
.profile-img {
  height: 55px;
}
.profile-name {
  display:unset !important;
  font-weight: 600;
}
.down-svg {
  padding-top: 5px;
  margin-left: 3px;
}
.profile-dropdown-cont{
  position: relative;
  padding:0;
  list-style:none;
  cursor:pointer;
}
.profile-dropdown-cont li:first-child{
  position:relative;
  border-radius:5px 5px 0 0;
}
.profile-dropdown-cont li{
  /* This is needed, so that the paddings don't get added on the 100% but are included in the 100% */
  box-sizing: border-box;
  padding:5px 10px;
  border:solid 1px transparent;
  margin-left: 10px;
  margin-top:5px;
  font-size: 20px;
  position:absolute;
  display:none;
  /* the parent is the ul, so we need to subtract margin left  */
  width: calc(100% - 10px);
}
@media only screen and (max-width: 1175px){
  .header-cont,.content {
    max-width:80%;
    width:80%;
  }
}
@media only screen and (max-width: 900px){
  .header-cont,.content {
    max-width:90%;
    width:90%;
  }
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/22f7b461fc.js" crossorigin="anonymous"></script>
</head>
<header>
  <div class="border">
    <div class="header-cont">
      <div class="icon"><span>D</span></div>
      <ul class="menu-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
      <div class="profile-cont">
        <img src="https://s6.uupload.ir/files/profile-pic_qqbw.png" class="profile-img">
        <ul class="profile-dropdown-cont" onclick="click()">
          <li class="profile-name">
            manimonji
                      <svg xmlns="http://www.w3.org/2000/svg" class="down-svg" width="14" height="14" stroke="white" stroke-width="2" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
          </svg>
          </li>
          <li>hi</li>
        </ul>
      </div>
    </div>
  </div>
</header>

<body>
  <div class="content">
    <h1 class="min-size">Feel The Darkness</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
    </p>
    <h1 class="min-size">Light Is Bad, Shadow Is Good</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
    </p>
    <h1 class="min-size">Color, LOL</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
    </p>
  </div>
  <div class="footer-border">
    <footer>
      <div class="footer">
        <div class="copy-right"> &copy; 2022 Mani Monji, All Rights Reserved</div>
        <div class="icons">
          <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
              <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
            </svg></a>
          <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </a>
          <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
              <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
            </svg></a>
        </div>
      </div>
    </footer>
  </div>
</body>

</html>

如何将绝对定位元素宽度设置为父节点宽度？

How to set absolute positioned element width to parent node width?

html

css

web