Я пытаюсь удалить пустое пространство, отображаемое под нижним колонтитулом, когда страница находится в мобильном режиме. Я хочу, чтобы он автоматически растягивался, чтобы заполнить ширину. Некоторые коды для сценария, но я включил его. Я также удаляю сценарий, потому что вся его логика не влияет на дизайн.
Ниже приведен код, который я использую.
В моем css для заполнения пробелов сверху и по бокам.
<style>
.button {
background-color: deepskyblue;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
margin: 10px 25px 0px;
}
.button1 {
background-color: deepskyblue;
color: white;
border: 2px solid deepskyblue;
}
.button1:hover {
background-color: deepskyblue;
color: white;
}
h1 {
font-family: Open Sans;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 26.4px;
}
h3 {
font-family: Open Sans;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 15.4px;
}
p {
font-family: Open Sans;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
blockquote {
font-family: Open Sans;
font-size: 21px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 30px;
}
pre {
font-family: Open Sans;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 18.5667px;
}
panel-footer {
background-color: none;
}
@media only screen and (max-width: 600px) {
.mob-horizontal {
padding: 0 !important
}
.mob-vertical {
margin: 0 !important
}
.mob-row {
min-height: 0 !important
}
.mob-row div.col-md-4 {
min-height: 0 !important
}
.panel-group {
margin-bottom: 0 !important;
}
}
</style>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="container mob-horizontal" style="overflow-x: hidden; overflow-y: hidden;">
<div class="row">
<div class="col-md-6 col-md-offset-3 mob-horizontal mob-vertical" style="margin-top: 5em;">
<div class="panel-group text-sm-center">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="pull-right" style="padding-right: 15px;">
<select id="translate" class="navbar-text form-control" style="width: 80px; color: #1281bb; font-size: 13px; padding: 0px; margin: 0px; background-color: rgba(255, 255, 255, 0); background-image: none; border: 1px solid rgb(56, 162, 94); box-shadow: none">
<option value="0">List 1</option>
<option value="1">List 2</option>
<option value="2">List 3</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body mob-horizontal">
<div class="row" style="margin: 0 !important">
<br />
<div class="row">
<div class="col-md-12">
<div id="message" style="color: red;"></div>
</div>
</div>
<div id="questionnaire-container">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<p id="description" style="padding: 10px">Can you solve this?</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;">
<button type="button" class="button button1" onclick="onNextButton('yes')" style="width: 150px; max-width: 100%;">
Yes
</button>
<button type="button" class="button button1" onclick="onNextButton('no')" style="width: 150px; max-width: 100%;">
No
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="iframe-container">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<h3 id="iframe-title" style="padding: 25px"></h3>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-12">
<div id="iframe-placeholder"></div>
</div>
</div>
</div>
</div>
</div>
<div id="contact-container">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<h1 id="tellTitle" style="padding: 25px"></h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="text-center">
<p id="telldesc1" style="padding: 20px"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="text-center">
<p id="telldesc2" style="padding: 25px"></p>
</div>
</div>
</div>
<br />
</div>
<hr />
<div class="row">
<div class="col-md-12">
<center>
<a id="reset" onclick="onResetButton()"></a>
</center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<center>
<div id="Panel1">
<p style="padding:35px">Looking for? <a id="clickhere" onclick="onClickHereButton()" style="font-weight:bolder; color:black"></a></p>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer text-center">
<div class="row">
<div class="col-md-12" style="margin-top: 10px;">
<asp:HyperLink ID="HyperLink3" runat="server">Sample Link</asp:HyperLink>
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin-top: 10px;">
<asp:Label ID="Label2" ForeColor="Black" Font-Bold="true" runat="server"></asp:Label>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
Ниже приведено изображение, чтобы помочь.
