我遇到了一个问题，我的粘性页脚在IE和FF中有效，但在Chrome中不起作用，这让我发疯了。 在 Chrome 中，如果窗口的大小足够大（宽度和高度），则可以看到页脚末端和窗口底部之间的白色间隙。 这在FF或IE中不会奇怪地发生。 任何想法或意见将不胜感激。非常感谢！
J
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
.ATS-header{
background-color:#EEEEEE;
}
.ATS-footer{
background-color: #002955;
color: #fff;
padding: 10px 0;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
.error_msg_class {
padding-right: 15px;
text-align: right;
font-weight: bold;
color: red;
padding-bottom: 10px;
}
.loginContainer {
width: 360px;
padding: 5px;
border: 1px solid black;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
}
.modal-dialog {
width: 350px;
margin: 25% auto;
}
@media (min-width: 768px) {
.modal-dialog {
width: 350px;
margin: 15% auto;
}
}
.modal-title, h6 {
font-weight: bold;
color: white;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
background-color: #1057A7;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
label {
width: 8em;
float: left;
margin-right: 0.3em;
display: block;
}
</style>
</head>
<body class="Frame" >
<div class="ATS-header">
<div class="container">
<header class="Row" >
<h1>company logo</h1>
</header>
</div>
</div> <!-- end of ATS header -->
<section class="Row Expand">
<div class="main-content">
<div class="container">
<h2>Login</h2>
<p>If you are a previous user of our system, a unique Username and Password has already been assigned to you. All you need to do is to use this username and password to proceed.</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div class="loginContainer">
<form id="atsLogin" name="atsLogin" method="post" action="">
<table width="100%" class="NoBorderTableOverride" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="40%"> Username : </td>
<td><input type="text" id="atswebid" name="atswebid" value="" class="inputTextLayout" /></td>
</tr>
<tr>
<td> Password : </td>
<td><input type="password" name="atswebpass" class="inputTextLayout" /></td>
</tr>
<tr>
<td> </td>
<td><a data-toggle="modal" href="#popup" data-target="#popup">Forgot Your Username/Password?</a></td>
</tr>
<tr>
<td> </td>
<td><div class="divSubmitButton">
<input type="submit" name="Submit" value="Submit"/>
<input type="hidden" id="logaccess" name="logaccess" value="members" />
</div></td>
</tr>
</table>
</form>
</div></td>
</tr>
</table>
<br>
<p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui.Ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius m ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
</div> <!-- main-content -->
<!-- modal -->
<div id="popup" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white">×</button>
<div class="modal-title">
<h6>Forgot Username/Password</h6>
</div>
</div>
<div class="modal-body">
<form id="forgot_pass_form" name="forgot_pass_form">
<p>
<label for="forgot_lastname">Last Name</label>
<input type="text" id="forgot_lastname" class="inputTextLayout" />
</p>
<p>
<label for="forgot_email">E-mail</label>
<input type="text" id="forgot_email" class="inputTextLayout" />
<br />
</p>
</form>
<div id="form_response" align="center" class="error_msg_class"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn-primary" id="forgotpassButton">Submit</button>
<button type="button" class="btn-small" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- end of modal -->
</div> <!-- end of main-content -->
</div> <!-- end of the container -->
</section>
<footer class="Row">
<div class ="ATS-footer">
<div class ="container">
<div class="col-sm-2"> company logo</div>
<div class="col-sm-7">
<p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="col-sm-3">
<p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
</footer>
</body>
</html>
我想通了。 我必须改变
.Row.Expand {
height: auto;
}
自
.Row.Expand {
height: 100%;
}
这就成功了！！