CODEWITHSUNDEEP
csstwitter-bootstrap
KlydeMonroe
KlydeMonroe

Reputation: 195

Bootstrap Single Page Full Screen Layout Responsive Height

I am trying to make a single page full screen layout using Bootstrap 3 where the height of the main body is responsive.

The page is going to be displayed in Kiosk mode displaying 3 panels which display different messages, but as the site is going to be displayed on multiple screens of different sizes I am wanting to get the main to be responsive in height.

https://jsfiddle.net/gokcLvtv/7/

<div class="container">

  <div class="row header">
    <div class="col-xs-6">
      Title
    </div>
    <div class="col-xs-6 text-right">
      LOGO
    </div>
  </div><!-- Header-->

  <div class="row main">
    <div class="col-xs-8">
      <div class="well">Panel One</div>
    </div>

    <div class="col-xs-4">
      <div class="well">Panel Two</div>    
      <div class="well">Panel Three</div>
    </div>
  </div><!--main-->

  <div class="row footer">
    <div class="col-xs-12">&copy; Copyright 2016</div>  
  </div><!--footer-->

</div><!--container-->

As you can see I have had to specify a height of the main content to get the cols to be 100% and then the .wells inside the column. But I am wanting this to be 100%.

Upvotes: 0

Views: 1544

Answers (2)

KlydeMonroe
KlydeMonroe

Reputation: 195

Thanks for your help with the vw ... I have managed to achieve this using vh for the height..

I have created an example for anyone who would like to use this in the future - here

Using the same layout 

 <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="well">Header</div>
            </div>
        </div>

        <!-- main -->
        <div class="row">
            <div class="col-xs-8 main">
                <div class="well">
                    Main Panel
                </div>
            </div>

            <div class="col-xs-4 side-bar">
                <div class="well">
                  Side Panel One
                </div>

                <div class="well">
                 Side Panel One
                </div>
            </div>

        </div>

        <!-- Footer-->
         <div class="row">
            <div class="col-sm-12">
                <div class="well">Hello</div>
            </div>
        </div>
    </div>

You will just have to play around with the heights to get it to the screensize that works for you.

Upvotes: 1

Zakalwe
Zakalwe

Reputation: 232

You can use the vw value for horizontal and vertical resizing. For example

HTML

<div class="main">
<div class="well">
Panel one
</div>
</div>

CSS

.main {
   border: 1px solid red;
   height: 75vw;
}

.well {
   width: 30vw;
   height: 30vw;
   margin: 1vw;
}

It's easy to translate from px to vw. Every 1 vw is 10 pixels.

Upvotes: 1

Related Questions