daily pastebin goal
23%
SHARE
TWEET

Untitled

a guest Jan 13th, 2018 35 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="navbar">Navbar</div>
  2.  
  3. <div id="home-content">
  4.  
  5.     <div class="container">
  6.  
  7.         <div class="home-logo">Logo Placeholder</div>
  8.  
  9.         <div id="login-form">
  10.             <p>Login Form</p>
  11.             <p>lorem</p>
  12.             <p>ipsum</p>
  13.             <p>dolar</p>
  14.             <p>sit</p>
  15.             <p>amet</p>
  16.         </div>
  17.  
  18.         <div id="home-banner">
  19.             Banner Height (Excluding .navbar, .home-logo, #login-form, #footer, .s-info)
  20.         </div>
  21.  
  22.     </div>
  23.  
  24.     <div class="s-info"><p>Some Information</p></div>
  25.  
  26.     <div id="footer">
  27.         <h1>Footer</h1>
  28.         <p>Dummy Content</p>
  29.     </div>
  30.  
  31. </div>
  32.    
  33. $(document).ready(sizeContent);
  34.  
  35. $(window).resize(sizeContent);
  36.  
  37. function sizeContent() {
  38.     var newHeight = $("html").height() - $(".navbar").height() - $(".home-logo").height() - $("#login-form").height() - $(".s-info").height() - $("#footer").height() + "px";
  39.  
  40.     $("#home-banner").css("height", newHeight );
  41.  
  42.     alert('Navbar Height:  ' + $(".navbar").height()); // 84
  43.     alert('Home Logo Height:  ' + $(".home-logo").height()); // 93
  44.     alert('Login Form Height:  ' + $("#login-form").height()); // 200
  45.     alert('Banner Height:  ' + $("#home-banner").height()); // 442
  46.     alert('S Info Height:  ' + $(".s-info").height()); // 45
  47.     alert('Footer Height:  ' + $("#footer").height());  // 51
  48.  
  49.     alert('HTML Height:  ' + $("html").height());
  50. }
  51.    
  52. html, body {
  53.     height: 100%;
  54.     padding: 0;
  55.     margin: 0;
  56.     font-family: Verdana;
  57.     font-size: 14px;
  58. }
  59. .navbar {
  60.     height: 84px;
  61.     background: yellow;
  62.     border: 0;
  63.     border-bottom: 1px solid #000;
  64. }
  65. .home-logo {
  66.     background: #999;
  67.     margin: 50px 0;
  68.     height: 90px;
  69. }
  70. #login-form {
  71.     padding: 20px 0;
  72.     background: #ccc;
  73. }
  74. .s-info {
  75.     padding: 10px 0;
  76.     background: #666;
  77. }
  78. #footer {
  79.     padding: 0;
  80.     background: #eee;
  81. }
  82.     #footer p {
  83.         margin: 0;
  84.         padding: 0;
  85.     }
  86.     #footer h1 {
  87.         padding: 0;
  88.         margin: 0;
  89.     }
  90. #home-banner {
  91.     background: red;
  92.     text-align: center;
  93.     color: #fff;
  94.     font-weight: bold;
  95. }
  96.    
  97. $(document).ready(sizeContent);
  98.  
  99. $(window).resize(sizeContent);
  100.  
  101. function sizeContent() {
  102.     var newHeight = $("html").outerHeight(true) - $(".navbar").outerHeight(true) - $(".home-logo").outerHeight(true) - $("#login-form").outerHeight(true) - $(".s-info").outerHeight(true) - $("#footer").outerHeight(true) + "px";
  103.  
  104.     $("#home-banner").css("height", newHeight );
  105.  
  106.     alert('Navbar Height:  ' + $(".navbar").outerHeight(true)); // 84
  107.     alert('Home Logo Height:  ' + $(".home-logo").outerHeight(true)); // 93
  108.     alert('Login Form Height:  ' + $("#login-form").outerHeight(true)); // 200
  109.     alert('Banner Height:  ' + $("#home-banner").outerHeight(true)); // 442
  110.     alert('S Info Height:  ' + $(".s-info").outerHeight(true)); // 45
  111.     alert('Footer Height:  ' + $("#footer").outerHeight(true));  // 51
  112.  
  113.     alert('HTML Height:  ' + $("html").outerHeight(true));
  114. }
  115.    
  116. alert("Home Banner Height : "+$("#home-banner").height());
  117.    
  118. $("#home-banner").css({'background-color','#cc9900'});
RAW Paste Data
Top