如何根据屏幕尺寸更改滑块和表格高度

Question

i want to show a form on a slider on medium and a large size screen it's working fine but on a small screen and extra small i am posting a screen shot i want this on extra-small screen my what to do go automatically downward as form height increase but in this case they are overlapping

this is a small screen

this is extra small screen

  #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

I think you want height: 100vh . Vh is relative to 1% of the height of the viewport, so it will fill the entire screen.

For more information about CSS units, you can go to w3schools. https://www.w3schools.com/cssref/css_units.asp