css - 如何使用 `max-width` , % 和 translate 来控制固定 div 的宽度？

Question

当使用 max-width 和百分比时，我无法找到一种方法来控制固定 div 的宽度。

虽然减小 max-width 百分比会减小 div 的宽度，但当 max-width 设置为 100%(或更高)时，它的宽度最大为 50%可用的屏幕宽度。如何使用 CSS 增加它？

CSS

.footnote {
  display: none;
  position: fixed;
  font-size: 0.75em;
  padding: 2em 1em;
}
.footnote:target {
  display: block;
  max-width: 120%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

HTML

<div class="main">
  <h1>ipsum</h1>
  <p>ipsum <a href="#note">note</a></p>
  <div ID="note" class="footnote">
    <p>ipsum</p>
  </div>   
</div>

Answer 1

您需要指定最小宽度和最大宽度。仅使用 max-width 本身不会做任何事情，除非文本试图溢出该值。您可以根据需要将 min-width 设置为 px,em,rem,%,vw。

.footnote {
  display: none;
  position: fixed;
  font-size: 0.75em;
  padding: 2em 1em;
}

.footnote:target {
background:red;
  display: block;
  min-width:60%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="main">
  <h1>ipsum</h1>
  <p>ipsum <a href="#note">note</a></p>
  <div ID="note" class="footnote">
    <p>ipsum</p>
  </div>
</div>