سوال: مشگل در ارتفاع در طراحی با فرم بوت استرپ

کد HTML:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->    <title>Bootstrap 101 Template</title>     <!-- Bootstrap -->    <link href="css/bootstrap.min.css" rel="stylesheet"><style>body {    color:#fff;    font-family:'Tahoma';    height:50%;    width:100%;    margin:0;    padding:0;  }a:link {    text-decoration:none;}a:visited {    text-decoration:none;}a:hover {    text-decoration:none;}a:active {    text-decoration:none;}.footer {    background-color:rgba(0, 0, 0, 0.3);    padding:10px;    border-top:3px solid rgba(80, 70, 70, 0.2);    margin-top:20px;}.footer_copyright {    direction:rtl;    width:100%;    font-family: 'Dinar';    direction: rtl;    text-align: justify;}.footer_copyright  a {    color:#fff;}.footer_copyright  a:hover {    color:#B7670D;}.footer_copyright  p {    color:#fff;    margin:0 0;    line-height:30px;}</style>    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>          <div class="container-fluid footer"><!-- Container-fluid -->     <div class="container">       <div class="row text-center"><!-- Row -->         <div class="footer_copyright text-center">          <p>این قالب توسط <a href="http://xxx.ir/">xxx</a> به صورت اختصاصی طراحی شده است و تمامی حقوق مادی و معنوی آن متعلق به                                  <a href="http://xxx.ir/">xxx</a> می باشد !</p>           <p>طبق ماده 12 فصل سوم قانون جرائم رایانه ای هرگونه کپی برداری بدون مجوز پیگرد قانونی خواهد داشت !</p>         </div>                      </div>       </div><!-- Container -->    </div><!-- Container-fluid -->     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    <!-- Include all compiled plugins (below), or include individual files as needed -->    <script src="js/bootstrap.min.js"></script>  </body></html>