Question

我想在中型和大型屏幕上的滑块上显示一个表单它工作得很好但是在小屏幕上我还发布了一个屏幕截图我要这个在超小屏幕上我做什么随着表格高度的增加自动向下但在这种情况下，它们重叠

Image to display the page where input is taken.

＆＃13;

        #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;
            }

＆＃13;

<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>......

＆＃13;

Answer 1

我想你想要height: 100vh。 Vh相对于视口高度的1％，因此它将填满整个屏幕。

有关CSS单位的更多信息，您可以访问w3schools。 https://www.w3schools.com/cssref/css_units.asp

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

1 个答案: