header 高度的计算未调整大小未按预期工作

Question

我有一个边栏，我想确保它是 window 的整个高度。为此，我必须减去 header 的 height，所以我使用 jQuery 来做到这一点。

出于某种原因，$(window).ready() 功能运行完美，而且无论我的页面大小如何，总能使 min-height 完美。但是，resize 函数仅在我将页面变大时才起作用，而当我出于某种原因将其变小并且我不理解时，它似乎补偿不足。

$(window).ready(function() {
  $("#sidebar").css("min-height", document.documentElement.clientHeight - document.getElementById("headerNav").clientHeight + "px");
});

$(window).resize(function() {
  $("#sidebar").css("min-height", document.documentElement.clientHeight - document.getElementById("headerNav").clientHeight + "px");
});

另外，我也用 height 代替 minheight 试过了，还是不行。

Answer 1

我认为纯粹的 CSS 解决方案更适合这里，而 flexbox 似乎是我的选择：

html, body {
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100vh;
}

.header {
  background-color: red;
  width: 100%;
  height: auto;
}

.content-wrapper {
  display: flex;
  width: 100%;
  align-self: stretch;
  flex-grow: 1;
}

.sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  width: 200px;
  background-color: green;
  align-self: stretch;
}

.content {
  flex-grow: 1;
  flex-shrink: 0;
  background-color: orange;
  align-self: flex-start;
}

<div class="wrapper">
  <div class="header">
    Header
    <p>
      Even more text here
    </p>
  </div>
  <div class="content-wrapper">
    <div class="content">
      Content
    </div>
    <div class="sidebar">
      Sidebar
    </div>
  </div>
</div>

编辑：我无法帮助你处理你的 js，因为我似乎无法发现问题，对我来说似乎没问题。

header 高度的计算未调整大小未按预期工作

Calculation of header height no resize not working as intended

css

jquery

responsive