javascript - 我应该使用什么来计算CSS中另一个div的高度？

Question

This question already has answers here:

Make a div fill the height of the remaining screen space
（31个答案）
14天前关闭。
我正在尝试创建一个横幅，当它完成加载时使用整个页面的高度。但是菜单的高度并不总是一样的，这取决于徽标的高度。
我试过使用calc函数，但是我不知道应该用什么来计算导航条的高度。

nav {
  background-color: #000;
}

.banner {
  background-color: #888;
  height: calc( 100vh - ???)
}

<nav> Navigation bar </nav>
<div class="banner"> Some text </div>
<div class="some-text"> some more text </div>

这种方法目前还不起作用，100vh本身会使画面比实际屏幕大。我要它覆盖导航栏下面的所有空间。

最佳答案

通过在banner和nav周围添加一个容器，您可以确保它始终是100vh，并将其定义为一个flex容器，这样您就可以在banner上使用flex: 1，通过使用flex: 1，它将填充可用空间的包含区域。

// prove it works
const header = document.querySelector('header')

const randomHeight = (element) => {
  return () => {
    const random = Math.floor(Math.random() * 31) + 60;
    header.style.height = random + 'px';
  };
}

setInterval(randomHeight(header), 1000)

body, html { margin: 0 }

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  background-color: blue;
}

.banner {
  background-color: red;
  flex: 1;
}

<div class="container">
  <header>
   <h1>Header yo</h1>
  </header>

  <section class="banner">
    <h2>Banner</h2>
  </section>
</div>

<section class="section__two">
  <h2>Another section</h2>
</section>

或者你可以做一个完整的js解决方案
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

const header = document.querySelector('header')
const banner = document.querySelector('.banner')
const observer = new MutationObserver(() => setBannerHeight())

observer.observe(header, {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
});

function setBannerHeight() {
  const { height } = header.getBoundingClientRect()

  setHeight(banner, `calc(100vh - ${height}px)`);
}

function setHeight(element, height) {
  Object.assign(element.style, { height });
}

setBannerHeight()


// prove it works
const randomHeight = (element) => {
  return () => {
    const random = Math.floor(Math.random() * 31) + 60;
    setHeight(header, random + 'px')
  };
}

setInterval(randomHeight(header), 1000)

body,
html {
  margin: 0
  display: flex;
  flex-direction: column;
}

header {
  background-color: blue;
  border: 1px solid transparent;
}

.banner {
  background-color: red;
  border: 1px solid transparent;
}

<header>
  <h1>Header yo</h1>
</header>

<section class="banner">
  <h2>Banner</h2>
</section>

<section class="section__two">
  <h2>Another section</h2>
</section>

关于javascript - 我应该使用什么来计算CSS中另一个div的高度？ ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58629026/

上一篇：html - CSS 动画背景颜色问题

下一篇：python - 如果下拉列表为空而不显示，我如何从前端检查？

Answer 1

通过在banner和nav周围添加一个容器，您可以确保它始终是100vh，并将其定义为一个flex容器，这样您就可以在banner上使用flex: 1，通过使用flex: 1，它将填充可用空间的包含区域。

// prove it works
const header = document.querySelector('header')

const randomHeight = (element) => {
  return () => {
    const random = Math.floor(Math.random() * 31) + 60;
    header.style.height = random + 'px';
  };
}

setInterval(randomHeight(header), 1000)

body, html { margin: 0 }

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  background-color: blue;
}

.banner {
  background-color: red;
  flex: 1;
}

<div class="container">
  <header>
   <h1>Header yo</h1>
  </header>

  <section class="banner">
    <h2>Banner</h2>
  </section>
</div>

<section class="section__two">
  <h2>Another section</h2>
</section>

或者你可以做一个完整的js解决方案
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

const header = document.querySelector('header')
const banner = document.querySelector('.banner')
const observer = new MutationObserver(() => setBannerHeight())

observer.observe(header, {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
});

function setBannerHeight() {
  const { height } = header.getBoundingClientRect()

  setHeight(banner, `calc(100vh - ${height}px)`);
}

function setHeight(element, height) {
  Object.assign(element.style, { height });
}

setBannerHeight()


// prove it works
const randomHeight = (element) => {
  return () => {
    const random = Math.floor(Math.random() * 31) + 60;
    setHeight(header, random + 'px')
  };
}

setInterval(randomHeight(header), 1000)

body,
html {
  margin: 0
  display: flex;
  flex-direction: column;
}

header {
  background-color: blue;
  border: 1px solid transparent;
}

.banner {
  background-color: red;
  border: 1px solid transparent;
}

<header>
  <h1>Header yo</h1>
</header>

<section class="banner">
  <h2>Banner</h2>
</section>

<section class="section__two">
  <h2>Another section</h2>
</section>