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%; height: 100%;
} }
#wrapper { #outputsection {
min-height: 100%; min-height: 80%;
}
#header > a {
color: red;
} }
#main { #main {
height: 100%; height: auto;
min-height: 100%; padding-top: 10px;
padding-bottom: 100px; padding-left: 10px;
padding-right: 10px;
padding-bottom: 1px;
} }
.textoutput { .textoutput {
height: auto; position:absolute;
width: 98%; top:30px;
min-height: 100%; bottom: 40px;
min-width: 98% !important; left:10px;
right: 10px;
overflow: hidden; overflow: hidden;
padding-left:2em;
background: rgba(201, 201, 201, 0.65); background: rgba(201, 201, 201, 0.65);
} }
#footer { #footer {
position: relative; position: relative;
margin-top: -100px; height: 40px;
height: 100px; width: 98%;
clear: both; 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 // make sure textarea fills surrounding div
$('.textoutput').css({height:(300-$('.form').height())+'px'}); //$('.textoutput').css({height:($(window).height()-$('.footer').height())+'px'});
//$('textarea').css({'height':"100%"}); //$('.textoutput').css({height:($(window).height() - 120 + "px")});
// configurations // configurations
$(".echo").on("change", function(event) { $(".echo").on("change", function(event) {

View file

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