如何根據屏幕尺寸更改滑塊和表格高度

Question

我想在中型和大型屏幕上的滑塊上顯示表單，但工作正常，但在小屏幕和超小屏幕上，我要發布屏幕快照，我希望在超小屏幕上顯示此表單，我的工作將自動向下作為表單高度增加，但在這種情況下它們是重疊的

這是一個小屏幕

這是超小屏幕

  #slider{ width:auto; padding:0px; } #form { width: 920px; height:100%; } .panel{ background: rgba(255, 255, 255, 0.6); box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px; } 

 <div id="slider" > <div id="jssor_1"style="height:100%;width:100px;position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; "> <!-- Loading Screen --> <div class=""> <div data-u="loading" style="position: absolute; top: 0px; left: 0px;"> <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div> <div style="position:absolute;display:block;background:url('images/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div> </div> <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;"> <div data-p="225.00" style="display: none;"> <img data-u="image" src="images/madina.png" /> </div> <div data-p="225.00" style="display: none;"> <img data-u="image" src="images/jeddah.png" /> </div> <div data-p="225.00" data-po="80% 55%" style="display: none;"> <img data-u="image" src="images/accra.png" /> </div> <a data-u="any" href="http://www.jssor.com" style="display:none">Full Width Slider</a> </div> </div> <div id="form" class="container"> <div class="row" style="margin-top:5px;"> <div class=" col-lg-6 col-md-8 col-sm-10 col-xs-12"> <div class="panel panel-default" style="border-color:green" > <div class="panel-heading" style="background-color:white" > <h2 class="panel-title" style="color:forestgreen" >Search & Book <span class="glyphicon"><i class="glyphicon glyphicon-plane"></i></span></h2> </div> <div class="panel-body"> <form role="form" runat="server" class=""> <div class="row" style="margin-bottom:0px"> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-10" style="margin-left:20px;"> <div class="form-group"> <label style="font-size:13px;margin-left:5px">Name</label> <input id="n" name="n" type="text" class="form-control input-sm" placeholder="Name" required="required" value="" runat="server"/> </div> </div> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-10" style="margin-left:20px"> <div class="form-group"> <label style="font-size:13px;margin-left:5px">Email</label> <input id="em" type="text" name="email" class="form-control input-sm" placeholder="email" value="" runat="server"/> </div> </div> </div> <div class="row" style="margin-top:0px"> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-10" style="margin-left:20px;"> <div class="form-group"> <label style="font-size:13px;margin-left:5px">Phone Number</label> <input type="text" name="password" id="tel" class="form-control input-sm" placeholder="Phone Number" runat="server" /> </div> </div>...... 

Answer 1

我認為您想要height: 100vh 。 Vh相對於視口高度的1％，因此它將填滿整個屏幕。

有關CSS單元的更多信息，您可以轉到w3schools。 https://www.w3schools.com/cssref/css_units.asp