0
내 끈끈한 바닥 글은 IE 및 FF에서는 작동하지만 Chrome에서는 작동하지 않으며 문제가 있습니다. Chrome에서 너비가 충분히 큰 창 (폭과 높이 모두)의 크기를 조정하면 바닥 글의 끝과 창의 아래쪽 사이의 흰색 간격을 볼 수 있습니다. 이것은 FF 또는 IE에서 이상하게 발생하지 않습니다. 어떤 생각이나 의견이라도 고맙게 여길 것입니다. 정말 고마워!Chrome에서 끈적한 바닥 글이 작동하지 않지만 IE 및 FF에서 작동합니다.
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>