Html layout question - bootstrap

Hello guys, what is the best way to do this kind of dashboard (100% width and 100% height) with bootstrap 3. I can't use jquery, just pure js.  Any suggestions would be nice. Thank you

Here's the wireframe:
http://tinypic.com/r/2h5il1k/8
LVL 1
Fajer39Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Prasadh BaapaatWeb Designer & DeveloperCommented:
I read about Viewport height and you can try using it... means this is a suggestion that may work or may not.

you have asked for a JS solution, but this came to my mind so sharing with you... just to be clear, I just read an article and thought of trying it out sometimes later... so no idea about the browser compatibility, if it will work with bootstrap or not etc...

you will have to do some RnD on it ...  here is a link to the article I read
Fajer39Author Commented:
Thank You Prasadh, this has already came to my mind and I will be consider it but on ios devices viewport heigh is a little bit buggy, so I don't know what to do right now
Dean OBrienCommented:
Hello Fajer39,

Try the following:
<html>
<head>
<style>
#container {background:#fcc;height:100%;min-height:100%;position:relative;}
#container p {margin:0 150px}
#container div p {margin:0}
#panel1 {background:#cfc;position:absolute;left:0;top:0;height:50%;width:150px}
#panel2 {background:#ccf;position:absolute;right:0;top:0;height:50%;width:150px}
#panel3 {background:#ffc;position:absolute;left:0;bottom:0;height:50%;width:150px}
#panel4 {background:#cff;position:absolute;right:0;bottom:0;height:50%;width:150px}
@media screen and (max-width: 768px) {
#container {height:auto;}
#container p {margin:0}
#panel1 {position:static;height:150px;width:100%}
#panel2 {position:static;height:150px;width:100%}
#panel3 {position:static;height:150px;width:100%;display:none}
#panel4 {position:static;height:150px;width:100%;display:none}
}
</style>
</head>
<body>
<div id="container">
	<div id="panel1"><p>Panel 1</p></div>
	<div id="panel2"><p>Panel 2</p></div>
	<div id="panel3"><p>Panel 3</p></div>
	<div id="panel4"><p>Panel 4</p></div>
	<p>Main</p>
</div>
</body>
</html>

Open in new window


Couple of things to note:

I have included code that will change the style of the elements when the viewport size drops below 768px. You can add additional or amend to handle different size screens.

I hid two of the panels using display:none, as it is common practice to only display the most relevant information when displaying on restricted size. You can easily add back by removing these lines. You can also change whether the panels appear before or after the main content, by moving the blocks of code before or after the main content.

Working example here:
http://www.suremedia.co.uk/ee-examples/full-width-height-responsive-viewport-with-panels.htm

Easynow
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Tom BeckCommented:
You did say Bootstrap 3 so I will suggest this layout. Bootstrap is a css framework that makes it easy to create responsive layouts. You just adjust the classes to get the layout you want. No javascript required. Best to read up on it until you understand the concepts.

In your wireframe you specify 50% height for the two sidebar rows. Not a good idea.The content should dictate the height. For the layout below, I am providing arbitrary heights to the containers to give them dimension. On the completed page however, content should determine the container's height.
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>Review Form</title> 
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      <style>
	  * {margin:0 auto; padding:0 }
	  body, html {
		  width:100%;
		  height:100%;
		  text-align:center
	  }
	  header {
		  background-color:#def;
	  }
	  div.col-lg-2 {
		  border:1px solid brown;
		  min-height:900px		  
	  }
	  div.col-lg-2 div {
		  height:50%;
		  border:1px solid brown;
		  min-height:400px
	  }
	  div.main div {
		  border:1px solid brown;
		  min-height:800px
	  }
	  div.main div.footer {
		  border:1px solid brown;
		  min-height:100px
	  }
	  </style>
	  

   </head>
   <body>
   <header>
   	  <h1>Header</h1>
   </header>
   <div class="container-fluid">
      <div class="row">
         <div class="col-xs-12 col-lg-2">
            <h3>Left Content</h3>
            <div class="col-xs-12"><h4>Left Top content</h4></div>
            <div class="col-xs-12"><h4>Left Bottom content</h4></div>
         </div>
         <div class="col-xs-12 col-lg-8">
            <h4>Center Content</h4>
            <div class="row main">
                <div class="col-xs-12 col-md-2 col-lg-3"><h4>Main Left</h4></div>
                <div class="col-xs-12 col-md-10 col-lg-9"><h4>Main</h4></div>
                <div class="col-xs-12 footer"><h4>Main Footer</h4></div>
            </div>
         </div>
         <div class="col-xs-12 col-lg-2">
            <h3>Right Content</h3>
            <div class="col-xs-12"><h4>Right Top content</h4></div>
            <div class="col-xs-12"><h4>Right Bottom content</h4></div>
         </div>
      </div>
   </div>
  </body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lenamtlCommented:
Hi,
You can use this admin template and adapt it to your needs.
Code: https://github.com/almasaeed2010/AdminLTE
Demo: https://almsaeedstudio.com/preview
There is a good documentation available from the menu

or if you have a budget you can buy one from Themeforest
http://themeforest.net/category/site-templates/admin-templates
Fajer39Author Commented:
Thank You guys, I will learn from all of your answers. I also realized that I can use css3 calc() to do the job...I know it's not a good solution, but it's a client's wish...and he don't want to talk about it :D...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.