HTML不会延伸到服务器上的窗口但在本地工作

时间:2016-05-24 16:41:03

标签: javascript css html5 responsive-design cors

创建响应式网页时,我遇到了一个奇怪的问题。

基本上,我创建了一个简单的html页面(第1页)并将其上传到blob存储。然后该页面在Azure AD的B2C门户中运行,该门户将登录表单插入到我的html页面(使用CORS)并向用户显示组合页面。由于我拥有自动将我的内容与Azure表单合并的最终组合页面(第2页)的源代码,因此我也可以从本地计算机上测试该页面。

我面临的问题是Page 1(我上传到blob)完美地延伸到窗口(高度和宽度),但是在与Azure登录表单合并之后的Page-2不会延伸高度。

我已经验证了使用chrome开发人员工具(在chrome上使用F12启用),第2页的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>
&#13;
&#13;
&#13;

第2页(合并页面):

&#13;
&#13;
<!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.!#$%&amp;’*+/=?^_`{|}~-]+@[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&#39;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>
&#13;
&#13;
&#13;

感谢任何帮助/指示!

3 个答案:

答案 0 :(得分:0)

你可以尝试

body, html { margin: 0; padding: 0; }

答案 1 :(得分:0)

在第一页的第1行添加

<!doctype html>  

然后再进一步向下打开关闭样式标记

</style      <-------- 
    </head>

答案 2 :(得分:0)

感谢您的帮助。我觉得这篇文章很有帮助: Stackoverflow

添加html {height:100%;解决了这个问题。