I want to make a div responsive and keep its aspect ratio. Always stay in the middle and keep hes ratio and distance from the header an footer

Question

I am trying to make that div from the middle responsive and I really don't know how. I've tried some things but they haven't worked. I want it to be in the middle with the same white space both up and down. I want when I resize the browser it's size to resize to but keep it's ratio. Is it possible?

$(document).ready(function() {
   $("[data-toggle = 'popover']").popover({
      html: 'true',
      content : '<button class="btn footer-buttons footerbuttonshov">About</button> ' +
                '<button class="btn footer-buttons footerbuttonshov">Feedback</button>'
   });
});

#navbar-main {
    background: #017f55;
    border:1px solid #000;
    border-radius: 0;
    clear:both;
}
#title {
    color:#000;
    font-size: 43px;
    top:7px;
}

#select {
    color:#000;
    height:30px;
}
.login-container {
    position:relative;
    background-color: #017f55;
    height:618px;
    width:464px;
    margin:0 auto;
    top:150px;
}
#nav-footer {
    background: #017f55;
    display:inline;
    text-align: right;
    border:1px solid #000;
}
.footer-buttons {
    display:inline;
    font-size: 20px;
    padding-right: 20px;
    background: none;
}
.icon-bar{
    border: 1px solid #fff;
}
#footer-navbar {
    border-color: #000;
}

#footer-button {
    border:1px solid #333
}
#footer-button:hover {
    background-color: #333;
}
#footer-button:active {
    background-color: #333333;
}
.footerbuttonshov:hover{
    background:#f98500;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Code Test</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="js/script.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">


    </head>
    <body>
        <!--Header-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

        <nav id="navbar-main" class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <img src="images/test_logo.png">
            </div>

            <div id="navbar" class="collapse navbar-collapse">
              <ul class="nav navbar-nav center">
                <li><a href="#index" id="title">Code Test</a></li>
                <li><a>
                    <select id="select">
                        <option value="English">English</option>
                        <option value="Devanagari">Devanagari</option>
                    </select>
                </a></li>
              </ul>
            </div>
          </div>
        </nav>
        <!--Main Container-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

        <div class="login-container">
            
        </div>

            <!--Footer-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

        <nav id="nav-footer" class="navbar navbar-default navbar-fixed-bottom">
            <div id="footer" class="container2">
                <div class="navbar-header">
                  <button id="footer-button" type="button" class="navbar-toggle collapsed" data-toggle="popover" data-target="#footer-navbar" data-placement="top">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                </div>
                <div id="footer-navbar" class="navbar-inner navbar-content-center collapse navbar-collapse">
                    <button class="btn footer-buttons">About</p>
                    <button class="btn footer-buttons">Feedback</p>
                </div>
            </div>
        </nav>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
</html>

Possible duplicate of [Maintain the aspect ratio of a div with CSS](http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) — Wesley Smith, Feb 06 '16 at 01:57
write your title simple but focus on the target of the problem. other will consider you spamming. If you feel your question is not duplicate, just go on .. give specific question based on your wish — Joe Kdw, Feb 06 '16 at 02:26

score 0 · Answer 1 · answered Feb 06 '16 at 02:34

Is this what you want to achieve?

.login-container {
    position:relative;
    background-color: #017f55;
    height:618px;
    max-width:464px;
    margin:0 auto;
    top:150px;
}

If it is true, then never use fixed-width as in width:464px; in your code. Just give max-width like I suggest., etc

It's better if you use media queries to handle it. Or, use bootstrap snippet to wrap .login-container

Check DEMO HERE

MORE: If you need .login-container inside bootstrap wrapper, you can use:

<div class="col-md-12">
   <div class="login-container">
   </div>
</div>

Check di Update (using wrapper) in HERE

I want to make a div responsive and keep its aspect ratio. Always stay in the middle and keep hes ratio and distance from the header an footer

1 Answers1