雪佛龙 - 响应行为和输入字段的问题已禁用

Question

我有以下组件：

问题是我必须修复高度，当你想要调整窗口大小时这是一个大问题。在同一时间我无法使用插入该div的输入字段。

这里是代码：

CSS：

#chevron {
  position: relative;
  padding: 12px;
  margin-bottom: 6px;
  height: 100%;
  z-index:-1;     
}

#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: #F7F7F7;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
   z-index: -1;
}

#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: #F7F7F7;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
   z-index: -1;
}​

HTML

    <div class="row" id="chevron" style="margin-top: 40px; height: 700px;">             
        <div class="row" style="margin-top: 40px;">
    <div class="col-sm-4 col-sm-offset-5">

             <div class="col-sm-1">
                <div id="circles"> 
                    1 
                </div>
             </div>
             <div class="col-sm-11" style="vertical-align:top;">
                <h2>Maak je pakje klaar</h2>
             </div>
    </div>
</div>

<div class="row" id="" style="padding-top:20px;">
     <div class="col-sm-10 col-sm-offset-2">

        <div class="col-sm-5">
             <div class="row">
            <div class="col-sm-4">
                <img src="../assets/img/sendingparcel/imgmaak.png" class="img-responsive">
            </div>
            <div class="col-sm-7">
                 <p> <h3>Verpak je zending</h3><br>
                 Zorg zelf voor een stevige doos
of vind het juiste formaat bij bpost <br><br><a href="#">
Ontdek alle dozen in onze eShop</a><a href="#"><br>Ontdek het aanbod in je postkantoor of PostPunt </a>
                 </p>
            </div> 
             </div>
        </div>


        <div class="col-sm-5">
            <div class="row">
                <div class="col-sm-4">
                    <img src="../assets/img/sendingparcel/package.png" class="img-responsive">
                </div>
                <div class="col-sm-7">
                    <p><h3>Weeg en meet je pakje 
en vermijd zo een weigering</h3><br>
                         Vanaf een dikte van 3 cm spreken we over een pakje.<br>    Ontdek alle dozen in onze eShop<br>Een pakje mag maximaal 30 kg wegen. </a>
                         </p>
                </div>
            </div>
            <div class="row">
                <br><p class="footnote" style="margin-left:30px;">Controleer ook het formaat. Een pakje moet minimaal 145 mm x 112 mm <br>en mag maximaal 1,5 m lang zijn. De totale oppervlakte is niet meer dan 3 meter: <br>lengte + 2 keer de breedte + 2 keer de hoogte.
                </p>
            </div>
        </div>

    </div><!-- col-sm-10 -->
</div> <!-- row -->

    </div>