如何使用`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

你需要specify a min-width along with max-width。除非文本试图溢出该值，否则仅使用max-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>