根据窗口大小自动调整高度大小，并使按钮填充空间

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; 以“中和”它们。