html - 需要 CSS 帮助来停止滚动溢出

问题描述

所以，我有一个小问题，主要是由于疲倦和整天花在这上面。我知道这是一件简单的事情，它只是逃避我。

我正在为工作构建一个 html 电子邮件滑块，并且我正在修改另一个系统来创建它。我已将滑块箭头定位在图像下方并将溢出设置为可见。这使得 td 滚动以适应溢出。我需要改变一些东西，使它不会滚动并且是全高。我很茫然。我只需要另一双新鲜的眼睛来帮助我......众所周知，制作电子邮件滑块并让它在多个设备上工作并不容易。

这里的代码笔： https ://codepen.io/ryangliozzo/pen/VwmGzbe

感谢大家，

瑞安。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
body{
  padding:0;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* bugfix for Android 4.4 to support e ~ y */
  body { -webkit-animation: bugfix infinite 1s; } 
  @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

  /* Hide Fallback content first */
  .fallback{
    display:none;
  }

  .carousel{
    display:block !important;
    max-height:none !important;
    position:relative;
    overflow-y:visible !important;
  }

  /* 
  Selective blocking for clients.
  - Samsung (#MessageViewBody) - no absolute positioning
  - Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
  */
  #MessageViewBody .fallback,
  body.MsgBody .fallback{ 
    display:block; 
  }
  #MessageViewBody .carousel,
  body.MsgBody .carousel{
    display:none !important;
  }

  input{display:none;}

  .carousel a{
    width:100%;
    display:block;
    overflow:hidden;
  }  

  .carousel .car-frames img{
    display:block!important;
    width:100% !important;
    height:auto !important;
  }

  .carousel.responsive{
    width:100% !important;
  }

  .carousel.slide a{
    position:absolute;
    top:0px;
    left:0px; 
    opacity:1;   
    width:100%;
    -webkit-animation: slide-anim 15s linear infinite;    
  }

  .carousel.slide a:nth-child(1){
    position:relative;
    -webkit-animation-delay: -16s;    
  }
  .carousel.slide a:nth-child(2){
    -webkit-animation-delay: -11s;    
  }
  .carousel.slide a:nth-child(3){
    -webkit-animation-delay: -6s;    
  }

  /* iOS doesn't like negative delay with translates (transform:translateX(100%);) */
  /* So we use margin although it is less "smooth" */
  @-webkit-keyframes slide-anim
  {
      /* start slide in */
      0% {
        margin-left:100%;
      }
      /* end slide in */
      5%{
        margin-left:0%;
      }
      /* start slide out */
      33.3333%{
        margin-left:0%;
      }
      /* end slide out */
      38.3333%{
        margin-left:-100%;
      }
      100%{
        margin-left:-100%;
      }
  }



  .carousel.slide .car-radio:checked ~ .car-cont .car-frames{ 
    position:relative;
    left:0px;
    top:0px;
    width: 300% !important;
    transition: left 1s;
  }
  .carousel.slide .car-radio2:checked ~ .car-cont  .car-frames{
    left:-100%;
  }

  .carousel.slide .car-radio3:checked ~ .car-cont  .car-frames{
    left:-200%;
  }

  .carousel.slide .car-radio:checked ~ .car-cont a{
      width:33.333%;
    }
  .carousel.slide .car-radio:checked ~ .car-cont a:nth-child(2){
      position:absolute;
      left:33.333%;
      top:0px;
    }
  .carousel.slide .car-radio:checked ~ .car-cont a:nth-child(3){
      position:absolute;
      left:66.666%;
      top:0px;
    }





    /* Navigation arrows */

    .carousel .car-ltn,
    .carousel .car-rtn {
      z-index:100;
      display: none;
      width: 10%;
      height: 100%;
      position: absolute;
      background-color:transparent;
      top:0px;
      cursor:pointer;
     
    }
    .car-ltn {
      left:0px;
    }
    .car-rtn {
      right:0px;
    }

    .carousel .car-ltn::after,
    .carousel .car-rtn::after {
      content: '';
      width: 0; 
      height: 0; 
      border-top: 40px solid transparent;
      border-bottom: 40px solid transparent;
      position: absolute;
      top:120%;
      margin-top:-8px;
      -webkit-filter: drop-shadow(1px 1.5px 1px rgba(0,0,0,.4));
   

    }
    .car-ltn::after {
      border-right: 40px solid #212734; 
      left: 40%;
    }
    .car-rtn::after {
      border-left: 40px solid #212734;
      right: 40%;
    }
    .carousel #car-cbox-support:checked ~ .car-cont .car-nav-1 {
      display:block;
    }
    .car-radio2:checked ~ .car-cont .car-controls .car-nav-2,
    .car-radio3:checked ~ .car-cont .car-controls .car-nav-3 {
      display:block;
    }


  .carousel .car-radio:checked ~ .car-cont,
  .carousel .car-radio:checked ~ .car-cont *,
  .carousel .car-radio:checked ~ .car-thumbnails *  {
    -webkit-animation: none;
  }

  


</style>

</head>
 
<body bgcolor="#ffffff">

<table width="100%" cellpadding="0" cellspacing="0"><tr>
<td>&nbsp;</td>
<td width="480" style="background-color:#ffffff">
<BR>


<!-- content -->


<!-- animated carousel -->
<!--[if !mso]><!-- -->
<div class="carousel slide responsive" style="overflow:hidden;display:none;max-height:0px;width:480px;">

<input id="car-cbox-support" type="checkbox" checked style="display:none!important">
<input name="car-radio" type=radio id="car1-radio-1" class="car-radio car-radio1" style="display:none!important">
<input name="car-radio" type=radio id="car1-radio-2" class="car-radio car-radio2" style="display:none!important">
<input name="car-radio" type=radio id="car1-radio-3" class="car-radio car-radio3" style="display:none!important">


<div class="car-cont" style="position:relative;background-color:#ffffff;">
  <div class="car-frames">
    <a href="#"><img class="zoom-in" src="http://freshinbox.com/examples/animated-carousel/images/car-castle.jpg" border="0"></a>
    <a href="#"><img class="zoom-out" src="http://freshinbox.com/examples/animated-carousel/images/car-meadow.jpg" border="0"></a>
    <a href="#"><img class="pan-right" src="http://freshinbox.com/examples/animated-carousel/images/car-coast.jpg" border="0"></a>
  </div>
  
<div class="car-controls">
    <label for="car1-radio-3" class="car-ltn car-nav-1"></label>
    <label for="car1-radio-2" class="car-rtn car-nav-1"></label>
    <label for="car1-radio-1" class="car-ltn car-nav-2"></label>
    <label for="car1-radio-3" class="car-rtn car-nav-2"></label>
    <label for="car1-radio-2" class="car-ltn car-nav-3"></label>
    <label for="car1-radio-1" class="car-rtn car-nav-3"></label>
  </div>
  
  </div>

</div>



<!--<![endif]-->
<BR><BR>



<!-- static fallback content -->
<div class="fallback">
  <a href="https://www.google.com/search?q=fallback" ><img src="http://freshinbox.com/examples/animated-carousel/images/carousel-fallback.jpg" height="320" width="500" style="display:block;" border="0"></a>
</div>



<!-- /content -->

</td><td>&nbsp;</td>
</tr></table>


<BR><BR><BR><BR><BR><BR><BR><BR>



</body>
</html>

标签： htmlcssresponsive-emails

html - 需要 CSS 帮助来停止滚动溢出

问题描述

解决方案

推荐阅读