元素超出父容器的边界

Question

我有一个名为 shelf2 的主容器，在其中有两个名为 dynamicShelf2Items 和 rightAdCon 的子容器。我遇到的问题是我将 shelf2 的高度设置为自动，因此它会响应其中容器的高度，但目前，shelf2 的高度正在响应 dynamicShelf2Items 的高度，但 rightAdCon 没有考虑，所以 rightAdCon 最终超出了 shelf2 的边界。如何让 shelf2 的高度响应其中的所有元素并获取其中最高父元素的高度？所以在这种情况下 rightAdCon 的高度大于 dynamicShelf2Items 所以 shelf2 应该响应那个高度因此 rightAdCon 不会越界。

.shelf2 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  background-color: pink;
}

.shelf2 .dynamicShelf2Items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin-top: 4%;
  left: 18%;
  width: 64%;
}

.shelf2 .dynamicShelf2Items .dynamicData {
  position: relative;
  width: 100%;
  height: 13em;
  cursor: pointer;
}

.shelf2 .dynamicShelf2Items .dynamicData .dynamicDataHoverHighlight {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.2%;
  height: 13em;
  background-color: rgb(3, 149, 3);
}

.shelf2 .dynamicShelf2Items .dynamicData .imgCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0%;
  left: 1.5%;
  width: 30%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData img {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -100%;
  left: 32%;
  width: 62%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 p {
  position: absolute;
  left: 0%;
  font-size: 1.3vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 25%;
  left: 0%;
  width: 100%;
  height: 30%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 p {
  position: absolute;
  left: 0%;
  font-size: 1.5vw;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .rightAdCon {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;
  row-gap: none;
  position: absolute;
  top: 0%;
  right: 1%;
  width: 15%;
  height: 200rem;
  overflow: hidden;
  padding-top: 5%;
  background-color: red;
}

.shelf2 .rightAdCon .adCon {
  height: 25%;
}

.shelf2 .rightAdCon .adCon video {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shelf2">
  <div class="dynamicShelf2Items">
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen%20Shot%202019-03-19%20at%201_32_36%20PM.png" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
        </div>
        <div class="level2">
          <p>Apple · Mac · Grey</p>
        </div>
        <div class="level3">
          <p>US ,999</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US ,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
  </div>
  <div class="rightAdCon">
    <div class="adCon">
      <video src="https://player.vimeo.com/external/401025531.sd.mp4?s=9b1bf00feea177c8d0d1d465b304a3d9c1ae0eee&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/479498538.sd.mp4?s=a1436f498fa9be8a887062a98de2ec1eddaa6167&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/394555897.sd.mp4?s=8f069cc18f74ecc7cad689223f65cf49990711f5&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
  </div>
</div>

Answer 1

嗯..shelf2 有一个绝对位置。我将 .shelf2 .dynamicShelf2Items 放入网格并将网格列定义为一定宽度 (https://css-tricks.com/snippets/css/complete-guide-grid/)。您可以使用百分比或 px。如果对这些子元素更好，则可以在每个网格内使用 flex。身高应该没有问题。

Answer 2

苏。花了一些时间修复你的代码。请仔细阅读我如何定位元素以及为此使用什么。

您会发现构建此站点实际上只需要 css 数量的 10%。不要使用你不理解的 CSS 属性。

你的一个大错误是使用 position: absolute;。这不是你应该马虎的事情。早在 1999 年，这可能是一回事，但今天，position:absolute; 仅在 css 的内容重叠和高级主题的罕见情况下使用。避开它。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body{
  background-color: #eee;
}
.wrapper {
  display: grid;
  max-width: 1000px;
  margin: 0 auto;
  grid-template-columns: 1fr 0.2fr;
  width: 100%;
  background-color: pink
}

.big-font {
  font-size: 1.2rem;
  font-weight: bold;
}

.products {
  display: grid;
  padding: 1rem;
  grid-gap: 4rem;
}

.product {
  display: grid;
  grid-template-columns: auto 1fr;
}

.product img {
  margin-right: 1rem;
  width: 300px;
  border-radius: 1rem;
}

.product .detailsCon {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.product .detailsCon > * {
  margin-bottom: 1rem;
}

.ads {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

video {
 width: 100%;
}

<div class="wrapper">
  <div class="products">
    <div class="product">
       <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen%20Shot%202019-03-19%20at%201_32_36%20PM.png" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US ,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div class="product">
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US ,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div class="product">
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US ,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div class="product">
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US ,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div class="product">
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US ,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
  </div>
  <div class="ads">
    <div class="adCon">
      <video src="https://player.vimeo.com/external/401025531.sd.mp4?s=9b1bf00feea177c8d0d1d465b304a3d9c1ae0eee&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/479498538.sd.mp4?s=a1436f498fa9be8a887062a98de2ec1eddaa6167&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/394555897.sd.mp4?s=8f069cc18f74ecc7cad689223f65cf49990711f5&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
  </div>
</div>

元素超出父容器的边界

element getting out of bound of parent container

html

css