手机端内容高度可变的无法css实现的输入框设计稿该如何处理？

       前天接到一个设计稿，页面布局比较简单，难点是活动规则放在一个“框”中，但是活动规则是后台传值过来的，其内容的多少是 运营人员根据需要而输入的，内容多的情况下很有可能铺满整个设计稿psd中的输入框，其部分设计稿截图如下：

                            

                                    图片1                     　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图片2

 

       由于是移动端页面，以前做法是，整个切一个图，然后再写一个div，然后绝对定位处理下，代码如下：

       

     在很多    里面的内容是固定内容的情况下，完全够用，但是由于切出来的图的输入框的高度是确定的，当其里面的内容非常多的情况下就会出现内容溢出psd输入框的问题，这明显是一个很严重的bug,该如何解决这样的问题呢？？思考再三，提出了两种解决方案，先阐述一下该方案的原理，再比较两种方案的特点。

图片1

    解决方案1：

       切图：  

       白色边框：用div的border属性来解决

       实现方法：切图决定定位在div上部，代码如下

       

 HTML部分：
   <li class="pr">
        <div class="activity-details-header">
            <img src="images/a7.png?v1.1"/>
        </div>
        <div class="activity-details">
            <!-- ${activityRule} -->
            活动对象：流量来了APP新注册用户

            活动规则：移动30M、电信30M、联通20M
                  全国通用流量包(当月有效，全国通用)

            活动时间：2016年06月21日-2016年06月23日

            到帐时间：2016年07月01日-2016年07月05日

            用户类型：安卓用户、苹果用户
        </div>
    </li>

css部分
     .activity-details{
            position: absolute;
            left:7.361% ;
            top:0;
            z-index: -1;
            width: 85.27%;
            border:2px #fff solid;
            padding: 35px 20px;
        }
        .activity-details-header{
           width: 32.5%;
           margin:0 auto;
        }
     .pr{position: relative;}

 

  其效果如下：

 

  经过测试，完全符合移动端条件

 

     解决方案2：

        切图：   ，    ，  

                                    切片1                                                                      切片2                                                                 切片3

      

        方法：切片1和切片3 作为图片， 切片2作为背景图片， 三者进行拼接，实现代码如下所示：

   

    HTML部分：

    <li>
        <img src="${ctx}/jsp/wap/activitySquare/images/a3.png?v1.1"/>                            // 切片1     

    </li>
    <li class="txt-bg pr">
         <!--<img src="${ctx}/jsp/wap/activitySquare/images/a4.png?v1.1"/> -->
        <div class="activity-details">
            <!-- ${activityRule} -->

           活动对象：流量来了APP新注册用户

            活动规则：移动30M、电信30M、联通20M
                  全国通用流量包(当月有效，全国通用)

            活动时间：2016年06月21日-2016年06月23日

            到帐时间：2016年07月01日-2016年07月05日

            用户类型：安卓用户、苹果用户
        </div> 
    </li>

  <li> 
      <img src="${ctx}/jsp/wap/activitySquare/images/a5.png?v1.1"/>                                  //  切片3
  </li>

 css部分 
 .activity-details {
    margin-left: 11%;
    width: 78%;
    padding: 0 0.3rem 0 0.5rem;
    line-height: .8rem;
    font-size: 12px;
    color: #fff;
    word-break: break-all;
    word-wrap: break-word;
}
.activity-details * {
    font-size: 12px;
    color: #fff;
    word-break: break-all;
    word-wrap: break-word;
}
.txt-bg {
    background: url("${ctx}/jsp/wap/activitySquare/images/a4.png?v1.1") 0 0 repeat-y;                //切片2      

    min-height: 130px;
    padding-bottom: 0.6rem;
    background-size: 100% auto;
}

.pr{position: relative;}

 

 

 

  这两种办法都能实现内容自适应高度的问题。但是对于更复杂，css无法实现的一些效果，使用方法2才是最好的办法，如下图：

   

  

     通过方法1，无法处理好，只能通过方法2

 

 自己工作所总结，督促自己学习进步，如能对遇到同样问题的同学有点借鉴作用，不甚荣幸，欢迎交流、批评指正。