javascript - 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 -
i trying make div middle responsive , don't know how. i've tried things haven't worked. want in middle same white space both , down. want when resize browser it's size resize keep it's ratio. 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 , 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>
is want achieve?
.login-container { position:relative; background-color: #017f55; height:618px; max-width:464px; margin:0 auto; top:150px; } if true, never use fixed-width in width:464px; in code. give max-width suggest., etc
it's better if use media queries handle it. or, use bootstrap snippet wrap .login-container
check demo here
more: if need .login-container inside bootstrap wrapper, can use:
<div class="col-md-12"> <div class="login-container"> </div> </div> check di update (using wrapper) in here
Comments
Post a Comment