当超出相对父母的右边界时，绝对位置元素的宽度会截断

时间：2017-02-01 05:49:46

标签： html css css-position

放置在position: absolute;父级内/周围的这些position: relative; div从所包含文本的大小和长度中获取高度/宽度。

但是，如果其中一个延伸到相对父级的右边界之外，则其宽度似乎会截断。

如何使超出相对父级右侧的div表现为不使用css的其他人？（应该适用于所有主流浏览器，包括Edge但不是IE）

Here is a fiddle，但我也会复制下面的代码+截图：

example

HTML：

<div id="relative">
    <div id="absolute-working-left">
        My width and height are determined by my text content.
    </div>
    <div id="absolute-working-middle">
        Mine, too.
    </div>
    <div id="absolute-problem">
        But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent.  WHY???
    </div>
</div>

......和风格。请注意，我希望绝对div宽度在包装之前达到最大200px。否则，宽度应由包含文本的长度确定：

#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
}

#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}

#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
}

这个问题出现在实现工具提示时，当开发人员使用时，需要将自己定位为offsetParent（或者如果DOM分支中没有前面的offsetParent，则为正文）。 / p>

编辑：如何仅使用css实现所需的行为？

解决方案需要适用于所有主流浏览器，包括Edge，但不适用于IE。而且只是重申一下，width的绝对div＆＃39;无法预测，因为它应该由文本的长度决定......唯一的例外是将有max-width（在这个例子中，它是200px）。

2 个答案:

答案 0 :(得分：5)

#absolute-problem div左侧设置为特定值，auto宽度和auto右侧。根据{{​​3}}，这会缩小div的宽度以适应其内容。

  

＆＃39;宽度＆＃39;并且＆＃39;对＆＃39;是＆＃39; auto＆＃39;并且＆＃39;离开＆＃39;不是自动＆＃39;然后宽度缩小到适合。然后解决＆＃39;对＆＃39;

虽然似乎不是一种可靠的方法来实现所需的确切行为（因为没有足够的属性设置来计算宽度），但以下是解决此问题的一些方法。 / p>

为绝对div

设置width

一个简单的解决方案是设置其宽度，以便它不会缩小。

#absolute-problem {
  background-color: red;
  left: 80px;
  width: 100px;
}

＆＃13;
＆＃13; 
body {
  background: #EEE;
}
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
  font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}
#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
  width: 100px;
}
＆＃13; 
<div id="relative">
  relative parent
  <div id="absolute-working-left">
    My width and height are determined by my text content.
  </div>
  <div id="absolute-working-middle">
    Mine, too.
  </div>
  <div id="absolute-problem">But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent. WHY???</div>
</div>
＆＃13;
＆＃13;
＆＃13;

为绝对div

设置right

你的div的宽度是未知的，解决这个问题的一种方法是设置right。这会相应地调整div的宽度。

#absolute-problem {
  background-color: red;
  right: -80px;
  left: 80px;
}

＆＃13;
＆＃13; 
body {
  background: #EEE;
}
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
  font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}
#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
  right: -80px;
}
＆＃13; 
<div id="relative">
  relative parent
  <div id="absolute-working-left">
    My width and height are determined by my text content.
  </div>
  <div id="absolute-working-middle">
    Mine, too.
  </div>
  <div id="absolute-problem">But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent. WHY???</div>
</div>
＆＃13;
＆＃13;
＆＃13;

将width设置为fit-content / max-content

另一种方法是使用fit-content或max-content （DLQ）作为绝对div，而不是设置其right。如果div的内容不一定会扩展到最大宽度，这会有所帮助。

#absolute-problem {
  background-color: red;
  right: -80px;
  width: fit-content;
}

＆＃13;
＆＃13; 
body {
  background: #EEE;
}
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
  font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}
#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
  width: fit-content;
}
＆＃13; 
<div id="relative">
  relative parent
  <div id="absolute-working-left">
    My width and height are determined by my text content.
  </div>
  <div id="absolute-working-middle">
    Mine, too.
  </div>
  <div id="absolute-problem">But not me...</div>
</div>
＆＃13;
＆＃13;
＆＃13;

设置min-width和max-width

一种现实的方法是让它能够在给定范围内调整其大小，以便控制溢出。

#absolute-problem {
  background-color: red;
  left: 80px;
  min-width: 50px;
  max-width: 200px;
}

＆＃13;
＆＃13; 
body {
  background: #EEE;
}
#relative {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 300px;
  background-color: white;
  font-size: 12px;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
  position: absolute;
  top: 45px;
  font-size: 12px;
  max-width: 200px;
}
#absolute-working-left {
  background-color: lightblue;
  left: -300px;
}
#absolute-working-middle {
  background-color: lightgreen;
}
#absolute-problem {
  background-color: red;
  left: 80px;
  min-width: 50px;
  max-width: 200px;
}
＆＃13; 
<div id="relative">
  relative parent
  <div id="absolute-working-left">
    My width and height are determined by my text content.
  </div>
  <div id="absolute-working-middle">
    Mine, too.
  </div>
  <div id="absolute-problem">But not me...</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

我在我的一个项目中也遇到了这个问题，我找到了一个简单的解决方案。只需在框中添加一个否定的 margin-right。

#absolute-problem {
  margin-right: -9999999px;
}

这应该在这种情况下有效。 9999999px 非常高，所以只要内容是，框就会向右延伸。如果你想要一个限制，给它一个合理的长度就行了。

相关问题
最新问题