CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5005768Himadree
user5005768Himadree

Reputation: 1439

How to correctly display bootstrap html elements in full height

I am a beginner in bootstrap & i design this window (photo given below).

enter image description here i used this code line to increase height.But i think it is not standard way to do so.

style=" height: calc(80vh);"

here is the source code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Department Information</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  

</head>
<body style="background-color:#584F39;" > 

    <div class="container">  
      <div class="panel-group">
        <div class="panel panel-primary" style=" height: calc(80vh);">
              <div class="panel-heading">  
              <h3 class="panel-title" style="text-align: center;">Information</h3> 
              </div>

            <div class="panel-body">
                <div class="container col-xs-12">
                    <form >

                         <div class="form-group">
                          <label>Code:</label>
                          <input type="text" class="form-control" id="dpcode" placeholder="Number Code">
                        </div>

                        <div class="form-group">
                          <label >Name:</label>
                          <input type="text" class="form-control" id="dpname" placeholder="Name">
                        </div>

                        <div class="form-group">
                          <label>Institute:</label>
                          <input type="text" class="form-control" id="ficode" placeholder="Number">
                        </div>

                        <div class="form-group">
                          <label>Faculty Name:</label>
                          <input type="text" class="form-control" id="fname" placeholder="Name Output">
                        </div>    

                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-success">Edit</button>
                        <button type="button" class="btn btn-danger">Delete</button>
                        <button type="button" class="btn btn-info">Exit</button> 
                    </form>
                </div>
            </div> 
        </div>    
      </div>
    </div>


</body>
</html>

How can i maintain full height for all device screen.please give me some idea.please let me know for any further information.thanks:(

Upvotes: 1

Views: 422

Answers (2)

AlexWebLab
AlexWebLab

Reputation: 846

Using the vh unit combined with calc() is the best solution to achieve a full height container.

i.e.: if you have this simple html structure:

<header> my header </header>
<div class="full_height"> my content </div>
<footer> my footer </footer>

you can use this css:

header { height: 200px; }
footer { height: 50px; }
.full_height { min-height: calc(100vh - 250px); }

Another solution is to use flexbox like well explained here: Holy Grail Layout

Upvotes: 1

Johannes
Johannes

Reputation: 67798

vhstands for "viewport height" - the percentage of the height of your browser window / your mobile device. So, 100vh usually results in an element height that equals the window/device height.

Upvotes: 2

Related Questions