如何使用位置：绝对并具有自动高度

Posted 2023-05-08

【中文标题】如何使用位置：绝对并具有自动高度

【英文标题】：How to use position: absolute and have an automatic height

【发布时间】：2019-12-08 09:40:23

【问题描述】：

首先，请注意，我没有找到任何推荐问题的答案，所以这在某种意义上可能是重复的，但我的问题还没有得到解决。 问题是我有一个位置：相对容器，其中包含 5 个图像，每个图像都具有绝对位置。我这样做是因为我需要页面具有移动响应能力。这两个元素是一行中的容器（来自网格）。 网格中的行应该有 height: auto;并且应该根据容器的大小调整大小，因为它的元素是相对位置而不是绝对位置，但它不是，我的图像最终与我网站上的页脚重叠。 我没有包括下面的 jQuery，但我会告诉你它不会操纵高度或宽度或任何东西。它只会改变图像的不透明度。

这是与元素关联的 CSS

.B9Resize  /*This is the row*/
    font-family: 'Abel', sans-serif;
    background-color: white;
    padding: 0;
    border-top: 5px solid #2f3030;
    min-height: 620px;


.slideshow-container /*This is the container element*/
    width: auto;
    max-width: 900px;
    height: auto;
    text-align: center;
    position: relative;


.slideshow-container img /*These are the actual image properties*/
    width: 100%;
    max-width: 900px;
    margin: 0 auto 0 auto;


.transparent-image /*These are additional properties*/
    opacity: 0;
    display: block;
    position: absolute;

这是 html

<div class="row"> <!-- THIS IS THE ROW -->
        <div class="col-12 col-m-12 B9Resize"> 

            <div class="slideshow-container-marginFix">
                <div class="slideshow-container">
                    <img src="../images/slideshow1.jpg"  id="image1" class="transparent-image">
                    <img src="../images/slideshow2.jpg"  id="image2" class="transparent-image">
                    <img src="../images/slideshow3.jpg"  id="image3" class="transparent-image">
                    <img src="../images/slideshow4.jpg"  id="image4" class="transparent-image">
                    <img src="../images/slideshow5.jpg"  id="image5" class="transparent-image">
                </div>
            </div>  

        </div>
    </div>

【问题讨论】：

您想要的确切结果是什么？响应式的杂耍？

是的，除了行距网格的高度之外，一切正常

【参考方案1】：

您应该对 B9Resize 应用自动高度，而不是设置最小高度。如果这不起作用，您可能需要检查 .slideshow-container-marginFix 以及 js 如何操作样式。

.B9Resize  /*This is the row*/
    font-family: 'Abel', sans-serif;
    background-color: black;
    padding: 0;
    border: 5px solid #2f3030;
    height: auto;

.slideshow-container /*This is the container element*/
    width: auto;
    max-width: 900px;
    height: auto;
    text-align: center;
    position: relative;
    overflow: hidden;
    


.slideshow-container div
  display: flex;
  flex-direction: row;


.slideshow-container img /*These are the actual image properties*/
    width: 100%;
    max-width: 900px;
    height: auto;


.transparent-image /*These are additional properties*/
    opacity: 1;

<div class="row"> <!-- THIS IS THE ROW -->
  <div class="col-12 col-m-12 B9Resize">
    <div class="slideshow-container-marginFix">
      <div class="slideshow-container">
        <div>
          <img src="https://images.unsplash.com/photo-1556911220-e15b29be8c8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"  id="image1" class="transparent-image">
          <img src="https://images.unsplash.com/photo-1556911220-e15b29be8c8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"  id="image2" class="transparent-image">
          <img src="https://images.unsplash.com/photo-1556911220-e15b29be8c8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"  id="image3" class="transparent-image">
          <img src="https://images.unsplash.com/photo-1556911220-e15b29be8c8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"  id="image4" class="transparent-image">
          <img src="https://images.unsplash.com/photo-1556911220-e15b29be8c8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"  id="image5" class="transparent-image">
        </div>
      </div>
    </div>  
  </div>
</div>

【讨论】：

你会想，但是行的高度和容器的高度都是0，因为图像是绝对定位的，这意味着它们不会对其父元素产生影响。

我建议您不要使用绝对位置并在 .slideshow-container 中隐藏溢出的内容。然后使用js更新位置/动画图像。

请查看更新后的答案。添加一个 div 来包装所有图像并将其强制为单行。

这如何回答 OP How to use position: absolute and have an automatic height？你没用过position: absolute

【参考方案2】：

如果您知道使用postion:absolute，那么您也应该知道使用 css 无法使用绝对定位的子级计算父级高度。

绝对定位的元素完全从 文档流，因此它们的尺寸不能改变尺寸 他们的父母。

现在，如果你真的想实现这个，你可以使用 javascript/jQuery 找到img 的高度，然后将其设置为.slideshow-container div。