I have an app that I am trying to build that uses three-columns. Currently, I have the following code:
<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<style type="text/css">
.app {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.app-col {
height: 100%;
}
.fullwidth {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
<meta class="foundation-data-attribute-namespace">
<meta class="foundation-mq-xxlarge">
<meta class="foundation-mq-xlarge-only">
<meta class="foundation-mq-xlarge">
<meta class="foundation-mq-large-only">
<meta class="foundation-mq-large">
<meta class="foundation-mq-medium-only">
<meta class="foundation-mq-medium">
<meta class="foundation-mq-small-only">
<meta class="foundation-mq-small">
</head>
<body>
<div class="app">
<div class="row fullwidth" data-equalizer="">
<div style="width:33%; height:100%;">
<div class="row" data-equalizer="">
<div class="large-6 columns" style="background-color:#467EAF;">
<h3>Hello</h3>
<nav>
<ul style="list-style: none;">
<li><a href="/what/we-do" style="color:white;">
<h4><i class="icon-google-plus"></i>Welcome</h4></a>
</li>
<li><a href="/about" style="color:white;">
<h4><i class="icon-google-plus"></i>About Us</h4></a>
</li>
</ul>
</nav>
<ul class="inline-list text-center pull-bottom">
<li>Google Plus</li>
<li>LinkedIn</li>
<li>Email Us</li>
</ul>
</div>
<div class="large-6 columns" style="background-color:#829EBF;">
<h3>ABOUT</h3>
<nav>
<ul style="list-style: none;">
<li>Overview</li>
</ul>
</nav>
</div>
</div>
</div>
<div style="width:67%;">
Content
<ul class="inline-list text-center pull-bottom">
<li>©2015 Goes Here</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
</body></html>
My problem is, my columns are not taking up the full-height of the screen. I thought that was the purpose of the data-equalizer attribute. Unfortunately, it looks like I was wrong. What am I doing wrong?
I've been using vh units to get this to work:
div.full-height {
min-height:100vh;
}
For our particular project it meets our requirements, which you can check for your project at Can I Use
According to the foundation docs you're supposed to use data-equalizer on the parent and then data-equalizer-watch on all the children. http://foundation.zurb.com/docs/components/equalizer.html
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
</div>
And then don't forget to add $(document).foundation();
Edit
I misunderstood what you wanted initially. Basically you need to add several css rules of height: 100%; so that both the parents and children can expand to 100% of the screen height.
Here is an updated JSfiddle: http://jsfiddle.net/NateW/e4uqw4yq/
Related
I'm trying to obtain a simple layout composed by a stack of header, main section, footer.
I'm using bootstrap 5.
The entire layout must cover all the available space in width and height, overflow (x and y) must be hidden.
Header and wrapper must take all the needed space.
Main section must be in between header and footer and must take all the available space.
Main section is composed by a sidebar and an area that will contain the main content.
Sidebar and main content are disposed side by side.
Sidebar must take 1/6 of the entire width available.
Main content must take the rest of available space in width.
Here is some code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content">
Main content
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
I would like to show overflow-y for sidebar/main content when it's needed. But I would also like to preserve the position of footer.
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
Set the .content container as relative, then put content in inner div of absolute inset-0.
Edit: this is just an example, I was using tailwind syntax on the class, bootstrap might be slightly different classNames
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
I've tried to everything to vertically center my h1 and h3 tag in Foundation 6. I've tried the transform translate, flexbox, and tried multiple examples here on stack over flow, and nothing works. When I use absolute positioning to center the content the, the headings get in the way of the top-bar nav on smaller screens, id there anyway to fix this issue, and Could some give me a hand with this? The h1 tag, and the h3 tag are located in line 48, and 49 of my codepen.
Codepen link
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="vertical menu">
<li>Home</li>
<li>About</li>
<li>References</li>
<li>Contact</li>
</ul>
</div><!-- off-canvas menu -->
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="hero-image">
<div class="expanded header-intro row">
<button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar show-for-small-only" id="menu">
<div class="top-bar-left">
<ul class="dropdown vertical menu" data-dropdown-menu>
<li class="menu-text">Foundation Framework</li>
<li>Home</li>
<li>About</li>
<li>Reference</li>
<li>About</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-12 text-center columns">
<h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
<h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
</div>
</div>
</div><!-- Eno of hero-image section -->
</div><!-- off-canvas-content-->
</div><!-- off-canvas wrapper-->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
you can use flexbox; you need to set a height to your flexbox container to see the centered title
here an example : https://codepen.io/anon/pen/YQPPaM
$(document).foundation();
.hero-image {
background: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/mountains-snow/mountains-snow-header-7050.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 25%;
}
.container{
height : 100vh;
display: flex;
flex-direction : column;
justify-content : center;
align-items : center;
}
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="vertical menu">
<li>Home</li>
<li>About</li>
<li>References</li>
<li>Contact</li>
</ul>
</div><!-- off-canvas menu -->
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="hero-image">
<div class="expanded header-intro row">
<button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar show-for-small-only" id="menu">
<div class="top-bar-left">
<ul class="dropdown vertical menu" data-dropdown-menu>
<li class="menu-text">Foundation Framework</li>
<li>Home</li>
<li>About</li>
<li>Reference</li>
<li>About</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-12 text-center columns container">
<h1>Foundation</h1> <!-- like the h1 centered vertically -->
<h3>Foundation For Sites</h3> <!-- like to have the h3 centered vertically -->
</div>
</div>
</div><!-- Eno of hero-image section -->
</div><!-- off-canvas-content-->
</div><!-- off-canvas wrapper-->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
try this
h1 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h3 {
margin: 0;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
Reference: w3schools
I suppose you're using flex-grid, so you can just add align-middle class to you row. This will add align-items: center; attribute, and align your columns' content vertically in the center.
.row {
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-flow: row wrap;
height: 200px;
}
.align-middle {
align-items: center;
}
.column, .columns {
flex: 1 1 0px;
padding-left: 20px;
padding-right: 20px;
min-width: initial;
}
<div class="row align-middle">
<div class="small-12 text-center columns">
<h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
<h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
</div>
</div>
I'm using materializecss and I had to put z-index into the navbar class because navbar was hiding under my fullscreen slider. Now everything is okay, but when I want to click on my side bar I have this problem:
problem
The whole window darken and I can’t click anywhere. I think I did something wrong with that z-index
here's css code:
.slider {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#nav{
z-index: 10;
position: relative;
}
.sideNav {
z-index: 11;
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="bootstrap/js/jquery-2.2.0.js"></script>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<nav id="nav" class=" blue lighten-4">
<div class="nav-wrapper">
<img src="/img/logo_reh.png">
<i class="material-icons">menu</i>
<ul class="left hide-on-med-and-down">
<li class="active">Główna</li>
<li class="active">Kontakt</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li class="active">Główna</li>
<li class="active">Kontakt</li>
</ul>
</div>
</nav>
<div id="szczupix" class="container">
<div class="row">
<div class="slider fullscreen">
<ul class="slides">
<li>
<img src="http://lorempixel.com/1200/1000/food/" alt="blad">
<div class="caption center-align">
<h3> Lekarze specjaliści</h3>
<h5> Możliwość wykonania specjalistycznych badać lekarskich</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/1200/1000/food/" alt="blad">
<div class="caption center-align">
<h3> Tylko świeże warzywa i owoce</h3>
<h5> Pochodzące z naszych polskich upraw</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/1200/1000/food/" alt="blad">
<div class="caption right-align">
<h3> Nowoczesny lokal</h3>
<h5> Przestronność i nowoczesność to nasz slogan</h5>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
//sivenav
$(".button-collapse").sideNav();
//slider
$('.slider').slider({
height: 600
});
$('.parallax').parallax();
$('.scrollspy').scrollSpy();
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
</script>
</html>
In your case:
#nav{
z-index: 10;
position: relative;
}
#sidenav-overlay {
z-index: 9
}
add to your styles.
Demo
Add this to your own css class to remove the overlay shadow
#sidenav-overlay {
z-index: 1
}
problem is with the z-index you assigning.you are giving greater z-index to the sideNav you should give greater z-index to your #nav like this
#nav{
z-index: 10;
position: relative;
}
.sideNav {
z-index: 11;
}
I'm using materializecss and I had to put z-index into the navbar class because navbar was hiding under my fullscreen slider.
Now everything is okay, but when I want to click on my side bar I have this problem:
The whole window darken and I can’t click anywhere. I think I did something wrong with that z-index
Here's my css code:
.slider {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#nav{
z-index: 10;
position: relative;
}
.sideNav {
z-index: 11;
}
How can I fix this?
this is happening because you are using position:relative in #nav give position:relativeto .sideNav also
.slider {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#nav{
z-index: 10;
position: relative;
}
.sideNav {
z-index: 11;
position: relative;
}
#GauravAggarwal please, here's code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="bootstrap/js/jquery-2.2.0.js"></script>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<nav id="nav" class=" blue lighten-4">
<div class="nav-wrapper">
<img src="/img/logo_reh.png">
<i class="material-icons">menu</i>
<ul class="left hide-on-med-and-down">
<li class="active">Główna</li>
<li class="active">Kontakt</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li class="active">Główna</li>
<li class="active">Kontakt</li>
</ul>
</div>
</nav>
<div id="szczupix" class="container">
<div class="row">
<div class="slider fullscreen">
<ul class="slides">
<li>
<img src="http://lorempixel.com/1200/1000/food/" alt="blad">
<div class="caption center-align">
<h3> Lekarze specjaliści</h3>
<h5> Możliwość wykonania specjalistycznych badać lekarskich</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/1200/1000/food/" alt="blad">
<div class="caption center-align">
<h3> Tylko świeże warzywa i owoce</h3>
<h5> Pochodzące z naszych polskich upraw</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/1200/1000/food/" alt="blad">
<div class="caption right-align">
<h3> Nowoczesny lokal</h3>
<h5> Przestronność i nowoczesność to nasz slogan</h5>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
//sivenav
$(".button-collapse").sideNav();
//slider
$('.slider').slider({
height: 600
});
$('.parallax').parallax();
$('.scrollspy').scrollSpy();
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
</script>
</html>
I try to make a layout with two scrollable columns (with bootstrap 2.2). Now it seems to be working if i remove the "!doctype html" tag so i assume something with my layout is not according to the specification. Can somebody tell me what i did wrong or how i could easier find my error?
<!doctype html> <!-- scrolling only works without the doctype -->
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" media="screen" href="bootstrap.min.css">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="#">Title</a>
<ul id="myTab" class="nav nav-tabs">
<li>Serials</li>
<li>Parameter</li>
<li class="active">Log</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="tabbable tabs-left">
<div class="tab-pane active" id="log">
<div class="span2 scrollable">
<div class="pad40-top">
First menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br >menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu </br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>main
</div>
</div>
<div class="span10 scrollable">
<div class="pad40-top">
First Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br> Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br >Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</ br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content< /br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content </br>Content</br>Content</br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
correct the many, many </br> </br > etc tags
<html xmlns="http://www.w3.org/1999/html"> should be <html xmlns="http://www.w3.org/1999/xhtml">
add a <title>
remove the stray </div> at the bottom
Now you have a html5 doc that validates. To get the scrollables to work, you must give either body or .scrollable a height. You cannot have a scrollable defined as 100% of 100%.
if you set
.scrollable {
height: 500px;
overflow: auto;
}
it works, OR - set the height dynamically in javascript :
<script type="text/javascript">
$(document).ready(function() {
var h=$(window).height();
$('.scrollable').height(h+'px');
});
</script>
note : the code just simulates the 100%->100%, top of the scrollables is still behind the navbar, and you must implement some code to take care of window resizing.
cleaned markup :
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 500px;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
<!-- or :
<script type="text/javascript">
$(document).ready(function() {
var h=$(window).height();
$('.scrollable').height(h+'px');
});
</script>
-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="#">Title</a>
<ul id="myTab" class="nav nav-tabs">
<li>Serials</li>
<li>Parameter</li>
<li class="active">Log</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="tabbable tabs-left">
<div class="tab-pane active" id="log">
<div class="span2 scrollable">
<div class="pad40-top">
First menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu <br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>main
</div>
</div>
<div class="span10 scrollable">
<div class="pad40-top">
First Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br> Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content <br>Content<br>Content<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>