Question

我有一个id为“r-u-ok”的元素。它是一个弹出窗口，其内容可以有不同的字数。

我想只设置最大宽度，而不是固定宽度。固定宽度无法自适应内容的字数。此外，我也希望将它在中间垂直对齐，并将其与中心对齐。

但即使我将100％设置为max-width属性，它的最大宽度仍然不是窗口的宽度，尽管它包含很多单词。

为什么？

忽略我可怜的英语。

#r-u-ok {
  position: fixed;
  /* display: none; */
  max-width: 70%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
}

<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>

以下是一个示例：fiddle link

Answer 1

我认为由于位置固定，div无法像正常文档流程那样增长。为了克服这个问题，使用一个额外的div - 外部div到位置，然后内部div可以随着它的内容增长：

#r-u-ok {
    position: fixed;
    width:100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    z-index: 99;
    text-align:center;
}
#r-u-ok > div {
    display: inline-block;
    max-width: 100%;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    font-size: 16px;
}

<div id="r-u-ok">
  <div>
  I think it should 100% width of this window, if the word more enough.
  </div>
</div>

Updated Fiddle

Answer 2

问题是，对于left:50%，系统认为您要将宽度限制为窗口的一半，即使您将整个事物翻译了-50％。所以你需要做的是明确设置width。没有其他办法。否则你会被困在这一半。

幸运的是，width: 100%不是唯一的解决方案。你可以做的是width: max-content，它完全符合你的需要不幸的是，它并不适用于所有浏览器。 IE和Edge不符合。但是，如果你提供正确的前缀，大多数人都会。

#r-u-ok {
  position: fixed;
  /* display: none; */
  max-width: 99%; /* changed */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
  /* added */
  width:-webkit-max-content;
  width:-moz-max-content;
  width:max-content;
}

<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>

Answer 3

我假设您要以全宽显示此div。为了做到这一点：

删除

max-width: 70%;

添加

width: 100%;

或

width: 100vw;

Answer 4

只需添加width:100%

即可

#r-u-ok {
  position: fixed;
  /* display: none; */
  width: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 16px;
}

i have a demand, the element, which id is "r-u-ok",is a pop, has a several possibility of content's word count.it's judge by a ajax request's callback data. and i want the element only has a max-width, not a fixed width.a fixed width can't self-adaption
the content's word count, besides i also hope it is vertical align middle and horizontal align center. but, even i set 100% to max-width attribute, it's max-width still not the width of window, though it's contain many word. WHY?
<div id="r-u-ok">
  I think it should 100% width of this window, if the word more enough.
</div>

位置固定元素不应用窗口宽度的最大宽度100％

4 个答案: