根據窗口大小自動調整高度大小，並使按鈕填充空間

Question

我試圖使我的網站具有響應性，因此首先我將字體大小和頂部粘性欄的高度調整為窗口大小，結果如下：

• 字體大小確實的確發生了變化，但是太小了，到了某個時候，我在按鈕下面有一點空間，那個按鈕沒有填充，這是我需要解決的問題。

• 頂部欄的高度沒有調整，也許我算錯了數學，但是我需要一些幫助。

請注意，我僅上傳了有用的CSS代碼

這是我的CSS：

#bar {
    display:inline-block;
    width: 100%;
    height: 50px;
    max-height:50px;
    background-color: #595959;
    box-shadow: 0px 2px 2px #888888;
    z-index:9999;
}

.bar-fixed {
    top: 0;
    z-index: 3;
    position: fixed;
    width: 100%;
}

#bar nav {
    margin-left:50px;
    margin-right:50px;
}

#bar nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #595959;
}

#bar nav ul li{
    display: inline;
    float: left;
}

#bar nav ul li a{
    display: block;
    color:  #e6e6e6;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#bar nav ul li a:hover {
    background-color:black;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#bar nav ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #595959;
}

#bar nav ul ul li {
    display: block;
    float: right;
}

#bar nav ul ul li a{
    display: block;
    color:  #e6e6e6;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;  
}

#bar nav ul ul li a:hover {
    background-color:black;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

html { font-size: 90.5%; }

body {
    padding: 0px;margin:0px;font-size: 1.1rem;
}

這是我的HTML：

<div class="topsec">
  <div id="bar">
    <nav>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Dropdown 1</a></li>
        <li><a href="#">Dropdown 2</a></li>
      <ul >
        <li><a href="#">Register</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </ul
  </nav>
</div>
<div class="wrapper">
  <article class="main">
  </article>
  <aside class="aside LB"></aside>
  <aside class="aside RB"></aside>
  <footer class="footer"></footer>
</div>

這是我的jQuery：

$(document).ready(function() {
  $(window).scroll(function () {
    console.log($(window).scrollTop());
    if ($(window).scrollTop() > 59) {
      $('#bar').addClass('bar-fixed');
    }
    if ($(window).scrollTop() < 60) {
      $('#bar').removeClass('bar-fixed');
    }
  });
});
$(document).ready(function () {
  var holdWidth = $(window).width();
  var holdHeight = $(window).height();
  var holdAverageSize = (holdWidth + holdHeight) / 2;
  $(window).on('resize', function () {
    newAverageSize = ($(window).width() + $(window).height()) / 2;
    newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
    $("html").css("font-size", newPercentage)
    $("#bar").css("height", newPercentage) /* am pretty sure this couldn't work because i am assigning a % to a porperty i a already set with px */
    console.log(newPercentage);
  });
});

Answer 1

您需要使用$(document).height()和$(document).width() 。 我認為這應該解決它。

Answer 2

關於第二點：

在“ #bar”規則中，兩個height: 50px;均為height: 50px; 和 max-height:50px; （這是多余的，因為height已經固定為50px）。

因此，在您有媒體查詢的地方/在另一個視口寬度處使用“ #bar”的另一個規則就顯得很明顯了。 如果第二個規則僅包含height 或 min-height （並且在問題中顯示的規則之后調用），則仍將另一個（未包含）參數保留為該規則的值。

編輯：例如，響應規則可能包含max-height: 30px ，但是由於在常規規則中仍然有height: 50px ，因此#bar將保持50像素高。 這可能是標題不調整高度的原因。

因此，您必須將它們都列出，例如，包括max-height: none; 或height: auto; 以“中和”它們。