我在创建响应式网页时遇到了一个奇怪的问题。
基本上，我创建了一个简单的 html 页面(第 1 页)并将其上传到 blob 存储。然后该页面在 Azure AD 的 B2C 门户中运行，该门户将登录表单插入我的 html 页面(使用 CORS)并向用户显示组合页面。由于我拥有最终合并页面(第 2 页)的源代码，它会自动将我的内容与 Azure 的表单合并，因此我也能够从我的本地计算机测试该页面。
我面临的问题是第 1 页(我上传到 blob)完美地延伸到窗口(高度和宽度)，但与 Azure 登录表单合并后的第 2 页不会沿高度延伸。
我已经使用 chrome 开发人员工具(在 chrome 上使用 F12 启用)验证了 page2 中 html/body 上的 css 样式是我应用的，浏览器/Azure 添加到它的唯一其他东西是 {display: block;}我认为这不应该导致当前的问题。
下面是源代码:-
第 1 页:
<html>
<head>
<title>User Details</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/common-1.0.4.css">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/selfAsserted.1.0.8.css">
<script src="https://login.microsoftonline.com/static/tenant/default/js/layout-1.0.0.min.js"></script>-->
<style>
#main_div {
background-image:url('https://adasphase2.blob.core.windows.net/democontainerblockblob/mm_background.jpg');
/* background-color: 00ff00; */
height:100%;
width:100%;
background-repeat:no-repeat;
background-size:100% 100%;
}
body {
/*background-color: #ff00ff;*/
height:100%;
width:100%;
}
h1 {
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
padding:0% 5% 5% 5%;
}
img {
width:100%;
padding-top:10%;
/*padding-top:10%;
padding-left:5%;
padding-right:5%*/
}
label[for=password] {
display: none;
}
h2 {
display: none;
}
{
}
label[for=logonIdentifier] {
display: none;
}
#forgotPassword {
display: none;
}
#password, #logonIdentifier {
margin: 2% 5% 2% 5%;
width: 90%;
}
#password, #logonIdentifier {
margin: 1% 5%;
width: 86%;
padding: 2% 2%;
}
#next {
background-color: #222222;
border-style: solid;
border-radius: 5px;
border-color: #ffffff;
color: white;
padding: 2% 2%;
text-align: center;
font-size: 3vw;
font-family: sans-serif;
border-width: 1px;
width: 90%;
margin: 2% 5%;
text-transform: uppercase;
font-weight: bold;
}
#next:active {
background-color: #444444;
}
div.create {
display: none;
}
#forgot{
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
margin:2% 5%
}
</style
</head>
<body>
<div id="main_div">
<img id="background_background_image" src="https://adasphase2.blob.core.windows.net:443/democontainerblockblob/splash_stacked_logo.png" alt="Illustration" />
<h1>LOGIN WITH A TARPPORTAL.COM ACCOUNT OR CLICK REGISTER FOR A NEW ACCOUNT.</h1>
<div id="api"></div>
</div>
</body>
</html>Page2(组合页面):
<!DOCTYPE html>
<!-- Build: 1.0.0.114 -->
<html>
<head>
<title>Loading...</title>
<script src="https://login.microsoftonline.com/static/library/require-2.1.17.min.js"></script>
<script>window.staticHost="https://login.microsoftonline.com/static";window.targetSlice="001-000";</script>
<script>var elementUrl="elements/selfasserted/unifiedSSP-1.0.8.min";</script>
<script>define('template.CP', [/** no dependencies. **/], {"list":[]});
define('template.SA_FIELDS', [/** no dependencies. **/], {"AttributeFields":[{"IS_TEXT":true,"IS_PASSWORD":false,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"LogonIdentifier","ID":"logonIdentifier","U_HELP":"","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false},{"IS_TEXT":false,"IS_PASSWORD":true,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"Password","ID":"password","U_HELP":"Enter password","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false}]});
define('language.data', [/** no dependencies. **/], {"email_pattern":"^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$","logonIdentifier_email":"Email Address","requiredField_email":"Please enter your email","logonIdentifier_username":"Username","createaccount_link":"Sign up now","requiredField_username":"Please enter your user name","createaccount_intro":"Don't have an account?","forgotpassword_link":"Forgot your password?","divider_title":"OR","cancel_message":"The user has forgotten their password","button_signin":"Sign in","social_intro":"Sign in with your social account","requiredField_password":"Please enter your password","invalid_password":"The password you entered is not in the expected format.","local_intro_username":"Sign in with your user name","local_intro_email":"Sign in with your existing account","invalid_email":"Please enter a valid email address","unknown_error":"We are having trouble signing you in. Please try again later."});
define('settings.data', [/** no dependencies. **/], {"remoteResource":"https://adasphase2.blob.core.windows.net/democontainerblockblob/RemoteServicesLoginPage.html","retryLimit":3,"api":"CombinedSigninAndSignup","csrf":"R2lYeVl1cEJLYWlpdENnSHJoOHpITHZtWWFaR2Y4eCsvcUZiK3JsTDd5OXFBZFAzUDViNDBtSTczUTd1YnpPS3RpVURmd1dPOGM1K0FZYU5Fam1IRkE9PTsyMDE2LTA1LTE4VDIyOjEzOjU3LjQxNTEwMjJaO0F6U0VkYlRUbDlHenNoQkVHK1JYSUE9PTt7Ik9yY2hlc3RyYXRpb25TdGVwIjoxfQ==","transId":"eyJUSUQiOiJmN2I4ODJjOS03NmJlLTQ0MzktYWJjNi1hNzE1NjM3ZDM4MGQifQ","pageMode":0,"config":{"operatingMode":"Email","sendHintOnSignup":"False","forgotPasswordLinkLocation":"AfterLabel","includePasswordRequirements":"true"},"hosts":{"tenant":"/lexustmstest.onmicrosoft.com/B2C_1_TMS_Lexus_SignUpandSignIn_Policy","policy":"B2C_1_TMS_Lexus_SignUpandSignIn_Policy","static":"https://login.microsoftonline.com/static/"},"locale":{"lang":"en","country":"US"}});
</script>
<script>var cookieEnabled=navigator.cookieEnabled?!0:!1,Constants;typeof navigator.cookieEnabled!="undefined"||cookieEnabled||(document.cookie="probe",cookieEnabled=document.cookie.indexOf("probe")!=-1?!0:!1),function(){document.querySelectorAll||(document.querySelectorAll=function(n){var i=i=document.createStyleSheet(),r=document.all,f=r.length,t,u=[];for(i.addRule(n,"k:v"),t=0;t<f;t+=1)if(r[t].currentStyle.k==="v"&&(u.push(r[t]),u.length>Infinity))break;return i.removeRule(0),u});String.prototype.trim||function(){var n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;String.prototype.trim=function(){return this.replace(n,"")}}()}();cookieEnabled&&(Constants=[],Constants.ERROR_REDIRECT_CONSOLE_STRING="Redirecting back to B2C service with querystring",function(){for(var n,u=function(){},t=["assert","clear","count","debug","dir","dirxml","error","exception","group","groupCollapsed","groupEnd","info","log","markTimeline","profile","profileEnd","table","time","timeEnd","timeStamp","trace","warn"],i=t.length,r=window.console=window.console||{};i--;)n=t[i],r[n]||(r[n]=u)}(),require(["require"],function(){require.config({baseUrl:window.staticHost,paths:{jquery:"library/jquery-1.10.2.min",handlebars:"library/handlebars-2.0.0.min",requirecss:"library/require-css-0.1.8.min",simpleModal:"library/jquery.simplemodal-1.4.5.min",core:"js/core-1.0.17.min",metrics:"js/metrics-1.0.1.min",modal:"js/modal-1.0.1.min",iso:"js/iso-unified-1.0.2.min",element:elementUrl},map:{"*":{css:"requirecss"}},skipDataMain:!0});require(["core","settings.data","metrics","element"],function(n,t,i,r){try{window.Metrics=i;metricResource=window.Metrics.create(t.remoteResource);metricResource.start();function u(){var i,f=canSetHeaders=!0,e=t.retryLimit;window.XDomainRequest?(i=new XDomainRequest,f=canSetHeaders=!1):i=new XMLHttpRequest;i.open("GET",metricResource.id);canSetHeaders&&metricResource.id.indexOf(window.staticHost)===0&&i.setRequestHeader("x-ms-cpim-slice",window.targetSlice);i.onload=function(){var t,u;if(!f||f&&i.status===200){metricResource.end();t=(new Date).getTime();r.initialize(i.responseText);metricResource.setInitializationTime((new Date).getTime()-t);return}u="external?statusCode="+i.status+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(u);return};i.onerror=function(){var t=0,r;f&&(t=i.status);r="external?statusCode="+t+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(r)};i.timeout=function(){if(this.tryCount++,this.tryCount<=this.retryLimit){u();return}var t="external?statusCode=4&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(t);return};i.onprogress=function(){};i.send()}u()}catch(f){n.redirectToServer("error?statusCode=0&statusMessage="+encodeURIComponent(f.message)+"&resource="+encodeURIComponent(t.remoteResource))}})}))</script>
</head>
<body>
<style>.no_display{display:none}.error_container h1{color:#333;font-size:1.2em;font-family:'Segoe UI Light',Segoe,'Segoe UI',SegoeUI-Light-final,Tahoma,Helvetica,Arial,sans-serif;font-weight:lighter}.error_container p{color:#333;font-size:.8em;font-family:'Segoe UI',Segoe,SegoeUI-Regular-final,Tahoma,Helvetica,Arial,sans-serif;margin:14px 0}</style>
<noscript>
<div id="no_js">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block JavaScript. You need to allow JavaScript to use this service.</p>
<p>To learn how to allow JavaScript or to find out whether your browser supports JavaScript, check the online help in your web browser.</p>
</div>
</div>
</div>
</noscript>
<div id="no_cookie" class="no_display">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block cookies. You need to allow cookies to use this service.</p>
<p>Cookies are small text files stored on your computer that tell us when you're signed in. To learn how to allow cookies, check the online help in your web browser.</p>
</div>
</div>
</div>
<script>if (!cookieEnabled) document.getElementById('no_cookie').className = '';</script>
</body>
</html>感谢任何帮助/指点!
最佳答案
你可以试试
body, html { margin: 0; padding: 0; }
关于javascript - HTML 不延伸到服务器上的窗口但在本地工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37419393/