Having trouble with css positioning

This commit is contained in:
Griatch 2015-06-19 09:50:48 +02:00
parent fc74b24646
commit f7f0e93214
3 changed files with 64 additions and 52 deletions

View file

@ -4,31 +4,35 @@ html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
#outputsection {
min-height: 80%;
}
#header > a {
color: red;
}
#main {
height: 100%;
min-height: 100%;
padding-bottom: 100px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 1px;
}
.textoutput {
height: auto;
width: 98%;
min-height: 100%;
min-width: 98% !important;
position:absolute;
top:30px;
bottom: 40px;
left:10px;
right: 10px;
overflow: hidden;
padding-left:2em;
background: rgba(201, 201, 201, 0.65);
}
#footer {
position: relative;
margin-top: -100px;
height: 100px;
height: 40px;
width: 98%;
clear: both;
}
*/

View file

@ -243,9 +243,17 @@ initialize = function() {
}
});
//console.log("windowsize: " + $(window).height() + " footerheight: " + $('.footer').height())
//$(window).on("resize", function(event) {
// $('.textoutput').css({height:($(window).height() - 120 + "px")});
//});
// resizing
// make sure textarea fills surrounding div
$('.textoutput').css({height:(300-$('.form').height())+'px'});
//$('textarea').css({'height':"100%"});
//$('.textoutput').css({height:($(window).height()-$('.footer').height())+'px'});
//$('.textoutput').css({height:($(window).height() - 120 + "px")});
// configurations
$(".echo").on("change", function(event) {

View file

@ -12,25 +12,26 @@
<script src="evennia.js"></script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
#outputsection {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="outputsection">
<!-- Config menu button -->
<div id="header">
<a href="#" data-reveal-id="ConfigMenu">Config</a>
</div>
<div id="main">
<!--Outputs -->
<div class="textoutput" readonly>Test textoutput </div>
<div class="textoutput">Test textoutput </div>
</div>
</div>
<!-- Inputs -->
<div id="footer">
<div class="small-12 colums">
<!-- hide inputs behind tabs -->
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#singleinput">Single-line</a></li>
@ -65,7 +66,6 @@
</div>
</div>
</div>
</div>
<!-- Config area popup -->
<div id="ConfigMenu" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">