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?
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
0
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
0
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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

0

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
0
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...
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.