css - Stacking iframes in one page -


i trying create 1 page multiple iframes stacked scroll through. - want them extend 100% of length - want right , left sidebars stay fixed side of screen , not scroll iframe content.

issues having: -the side bar scrolling not staying on side when scroll second iframe. -i not able iframes display whole height without scrolling. here have tried. 

html {  	height:100%;  }  body {  	height:100%;  	margin:0;  }  h1 {  font-family: "century gothic", centurygothic, applegothic, sans-serif;  	}  h2 {  	font-family: "century gothic", centurygothic, applegothic, sans-serif;  }  h3 {  font-family: "century gothic", centurygothic, applegothic, sans-serif;  }    h4 {  font-family: "century gothic", centurygothic, applegothic, sans-serif;  }  p {  font-family: "century gothic", centurygothic, applegothic, sans-serif;  }  a:link {      color: #5e9787;  }  a:visited {      color: #85ccb8;  }  a:hover {      color: #4b766a;  }  a:active {      color: #38e0b1;  }	    /* begin: page layout*/  #container {  	width: 100%;  	height: 100%;  	margin-left: auto;  	margin-right:auto;  }  #header {  	height:15px;  	background-color: gray;  }  #rsidebar {  	float: left;  	width: 175px;  	height: 100%;  	background-color: #f7f6f2;    }  #mainbody {  	width: calc(100% - 300px);  	height:100%;  	background-color: white;  	float: left;  }  #lsidebar {  	width:50px;  	height:100%;  	background-color: #f7f6f2;  	float: right;  }    /* end: page layout*/
<!doctype html>    <html lang="en">  <head>    <meta charset="utf-8">      <title>encounter 11</title>  <link rel="icon" type="image/ico" href="favicon.ico"/>  <link rel="stylesheet" type="text/css" href="encounter-style.css">  <style>  </style>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        </head>  <body>  <div id="container">  <div id="rsidebar">  <div style="margin-top: 20px;" align="center">  <h2>title</h2>  </div>  <div style="margin-left: 10px; margin-top:120%;">  <h3 class="indent">learner bait</h3>  <h3>learner context</h3>  <h3>animated / engaged learning</h3>  <h3>heart learning</h3>  <h3>soul learning</h3>  <h3>life learning</h3>  <h3>kaizen learning</h3>  </div>  </div>  <div id="mainbody">  <iframe style="border-style: none; border-width: 0px; width:100%; overflow:initial;" src="https://s3.amazonaws.com/aws-website-learnsignifyone-at0az/encounter-11_1/11_1lb-1.html"></iframe>  <iframe style="border-style: none; border-width: 0px; width:100%; overflow:initial;" src="https://s3.amazonaws.com/aws-website-learnsignifyone-at0az/encounter-11_1/11_1lb-2.html"></iframe>  <iframe style="border-style: none; border-width: 0px; width:100%; overflow:initial;" src="https://s3.amazonaws.com/aws-website-learnsignifyone-at0az/encounter-11_1/11_1lb-3.html"></iframe>  </div>  <div id="lsidebar">  <h4>left sidebar</h4>  </div>    </div>  </body>  </html>


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more