【发布时间】：2020-02-11 18:55:13
【问题描述】：
当页面处于移动模式时，我试图删除页脚下方显示的空白区域。我希望它自动拉伸以填充宽度。一些代码是用于脚本的，但我包含了它。我还删除了脚本，因为它的所有逻辑并且不影响设计。
下面是我正在使用的代码。
在我的 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>下面是帮助图片。
【问题讨论】：
-
能否贴出完整代码
-
@Awais 我添加了一张照片，希望对您有帮助。
-
是的，但我无法检查照片，因为上面的代码看起来不错
-
@Awais 我更新了代码。在我看来，面板是问题
-
这对我来说似乎没问题，因为我已经测试过 screencast.com/t/zklcG6yhDA6J
标签： html css asp.net bootstrap-4 webforms