时间戳

首页 > 解决方案 > 当我的高度设置为自动时，动画箭头一直在我的 div 之外

html - 当我的高度设置为自动时，动画箭头一直在我的 div 之外

问题描述

我有一个问题，当高度设置为自动时，我的动画箭头超出了我的 div。有什么方法可以防止箭头超出 div，同时保持高度为自动（出于响应目的）？任何帮助将非常感激。

当我将高度设置为固定高度时，例如：300px，动画箭头在响应性方面完全消失；因此，我想将高度保持为自动，同时防止它超出 div。

.title-container-main {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 83%;
  height: auto;
  background-color: green;
  overflow: auto;
}

.title-main{
  margin-top: 0px;
  padding-top: 12px;
  text-align: center;
  font-family: myFirstFont;
  font-size: 36px;
  font-weight: lighter;
  color: #7f1146;
  letter-spacing: 3.5px;
  margin-bottom: 40px;
  background-color: white;

}

.title-main::after {
    display: block;
    content: '';
    background-color: #7f1146;
    height: 1.5px;
    width: 8%;
    margin: 13px auto 0 auto;
}

.title-container-text{
  line-height: 1.5em;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-weight: bold;
  color: #674965;
  position: relative;
  font-family: mySecondFont;
  font-size: 18px;
  text-transform: none;
  background-color: white;
}

a.active:after {
  display: block;
  content: '';
  background-color: white;
  height: 1.5px;
  width: 100%;
  margin: 2px auto 0 auto;
}

.scroll-down {
  margin-left: auto;
  margin-right: auto;
  margin-top: 45px;
    position: relative;
    display: block;
    text-align: center;
    font-size: 20px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 25px;
  height: 25px;
  border-bottom: 2px solid #7f1146;
  border-right: 2px solid #7f1146;
  z-index: 9;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
    -webkit-animation: fade_move_down 4s ease-in-out infinite;
    -moz-animation:    fade_move_down 4s ease-in-out infinite;
    animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
            <div class="title-container-main">
            <h2 class="title-main">TREATMENTS</h2>
            <p class="title-container-text">Some text. 
            <div class="scroll-down"></div>
          </div>

标签： htmlcss

解决方案

我建议您使用.scroll-down容器作为占位符并设置尺寸。宽度可以为 100%，所需的高度很容易计算：
element_height (25px) + translation_top (10px) + translation_bot (10px) = 45px

此外，您可以使用伪元素（例如:after）来绘制箭头。我们可以使用绝对定位，因此，它不会干扰高度：

.title-container-main {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  width: 83%;
  height: auto;
  background-color: green;
  overflow: auto;
  text-align: center;
  z-index: 1;
}

.title-main {
  margin-top: 0px;
  padding-top: 12px;
  text-align: center;
  font-family: myFirstFont;
  font-size: 36px;
  font-weight: lighter;
  color: #7f1146;
  letter-spacing: 3.5px;
  margin-bottom: 40px;
  background-color: white;
}

.title-main::after {
  display: block;
  content: '';
  background-color: #7f1146;
  height: 1.5px;
  width: 8%;
  margin: 13px auto 0 auto;
}

.title-container-text {
  line-height: 1.5em;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-weight: bold;
  color: #674965;
  position: relative;
  font-family: mySecondFont;
  font-size: 18px;
  text-transform: none;
  background-color: white;
}

a.active:after {
  display: block;
  content: '';
  background-color: white;
  height: 1.5px;
  width: 100%;
  margin: 2px auto 0 auto;
}

.scroll-down {
  position: relative;
  width: 100%;
  height: 45px;
  z-index: 1;
}

.scroll-down:after {
  position: absolute;
  content: '';
  font-size: 20px;
  z-index: -1;
  text-decoration: none;
  text-shadow: 0;
  width: 25px;
  height: 25px;
  margin-left: -14px;
  border-bottom: 2px solid #7f1146;
  border-right: 2px solid #7f1146;
  -webkit-transform: translate(0%, 0%) rotate(45deg);
  -moz-transform: translate(0%, 0%) rotate(45deg);
  transform: translate(0%, 0%) rotate(45deg);
  -webkit-animation: fade_move_down 4s ease-in-out infinite;
  -moz-animation: fade_move_down 4s ease-in-out infinite;
  animation: fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/

@-webkit-keyframes fade_move_down {
  0% {
    -webkit-transform: translate(0, -10px) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 10px) rotate(45deg);
    opacity: 0;
  }
}

@-moz-keyframes fade_move_down {
  0% {
    -moz-transform: translate(0, -10px) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -moz-transform: translate(0, 10px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes fade_move_down {
  0% {
    transform: translate(0, -10px) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 10px) rotate(45deg);
    opacity: 0;
  }
}
<div class="title-container-main">
  <h2 class="title-main">TREATMENTS</h2>
  <p class="title-container-text">Some text.</p>
  <div class="scroll-down"></div>
</div>

推荐阅读