如何获得全高？

Question

I'm trying to get the full height of the page to apply it to the styles, specifically to the darkMask class.我正在尝试获取页面的完整高度以将其应用于 styles，特别是darkMask class。

I need the height because when I do an action inside the header, a dark layer is applied to the entire page except the element that appears after invoking the action.我需要高度，因为当我在 header 内执行操作时，除了调用操作后出现的元素之外，整个页面都会应用一个深色层。

For now, I get the height thanks to the useRef hook and I put it to the container but this does not give me the full height现在，由于 useRef 钩子，我得到了高度，然后我把它放到了容器中，但这并没有给我完整的高度

import { useContext, useState, useRef, useEffect } from 'react';
import { useRouter } from 'next/router';
import { Header } from '../Header';
import { SearchToggleContext } from '../../contexts/SearchToggleContext';
import styles, { globalStyles } from './styles';

export const Layout = ({ children }) => {
  const [height, setHeight] = useState();
  const mainContainer = useRef(null);
  const { isOpenSearch } = useContext(SearchToggleContext);
  const router = useRouter();

  useEffect(() => {
    if (mainContainer.current) {
      setHeight(mainContainer.current.offsetHeight);
    }
  }, [router]);

  return (
    <>
      <div className='darkMask' />
      <Header />
      <main ref={mainContainer}>{children}</main>

      <style jsx global>
        {globalStyles}
      </style>
      <style jsx>{styles}</style>
      <style jsx>{`
        .darkMask {
          display: ${isOpenSearch ? 'block' : 'none'};
          height: ${height}px;
        }
      `}</style>
    </>
  );
};

/* Styles of layout */
import css from 'styled-jsx/css';

export const globalStyles = css.global`
  html,
  body {
    height: 100%;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  .navbarItem {
    margin-right: 2em;
  }
`;

export default css`
  main {
    height: calc(100vh - 80px);
    width: 100%;
    top: 80px;
    position: absolute;
  }

  .darkMask {
    position: relative;
    z-index: 4;
    width: 100%;
    top: 80px;
    position: absolute;
    background-color: rgba(45, 45, 45, 0.9);
  }
`;

/* _app.js file */
import { Layout } from '../components/Layout';
import { SearchToggleContextProvider } from '../contexts/SearchToggleContext';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <SearchToggleContextProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </SearchToggleContextProvider>
    </>
  );
}

export default MyApp;

Answer 1

You can use document.body.offsetHeight to get height of whole <body> element.您可以使用document.body.offsetHeight来获取整个<body>元素的高度。

 const { useState, useEffect } = React; function App() { const [height, setHeight] = useState(null); const [count, setCount] = useState(0); useEffect(() => { setHeight(document.body.offsetHeight); }, [count]); const elements = []; for (let i = 0; i < count; i++) { elements.push(<p key={i}>{`Element ${i}`}</p>); } return ( <div className="App"> <span>{`Document height: ${height} px`}</span> <div> <button onClick={() => setCount(count + 1)}>Add element</button> {elements} </div> </div> ); } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

如何获得全高？

问题描述

1 个解决方案

解决方案1
1 2020-08-08 16:27:11

如何获得全高？

问题描述

1 个解决方案

解决方案1 1 2020-08-08 16:27:11

解决方案1
1 2020-08-08 16:27:11