CSS如何使容器成为浏览器窗口的整个高度

Question

我有一个 div，我希望它与整个浏览器窗口一样高。到目前为止，我发现这样做的唯一方法是将高度设置为 927px：heigh: 927px;，但这似乎不是一种优雅的方法。

这是该页面的所有 CSS：

.container {
  width: 100%;
  background: url('https://media-cldnry.s-nbcnews.com/image/upload/newscms/2020_51/3436724/201218-cyberpunk-al-1020.jpg');
  background-repeat: no-repeat;
  background-size: auto;
  height: 100%;
  min-height: 100%;
}
.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #404040;
  width: 600px;
  height: 100%;
  min-height: 100%;
}

.fields {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.input {
  width: 200px;
  max-width: 200px;
  max-height: 20px;
  margin-top: 20px;
  margin-left: 10px;
}

.avatar {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

我希望顶部容器覆盖 100% 的浏览器窗口。那么body元素需要和整个浏览器窗口一样高。

据我所知，height: 100%; min-height: 100%; 应该这样做，但容器和正文在页面顶部都被压缩到大约 300 像素。我需要做什么？

如果你需要看，这是css样式的页面：

/** @jsxImportSource @emotion/react */
import React from 'react';
import { Page } from './Page';
import { PageTitle } from './PageTitle';
import { useForm } from 'react-hook-form';
import '../Styles/PlayerCreate.css';
//import S3 from 'react-aws-s3';

type FormData = {
  handle: string;
  role: string;
  avatar: string;
};

// const config = {
//   bucketName: 'cyberpunkv2',
//   dirName: 'avatars',
//   region: 'us-east-1',
//   accessKeyId: 'key',
//   secretAccessKey: 'key',
// };

function PlayerCreatePage() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <div className="container">
      <PageTitle>Create New Player</PageTitle>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="body">
          <div className="fields">
            <h3>Handle: </h3>
            <input
              {...register('handle', { required: true })}
              type="text"
              placeholder="Johnny Silverhand"
              className="input"
            />
            {errors.handle && <p>Handle is required.</p>}
          </div>
          <div className="fields">
            <h3>Role: </h3>
            <select {...register('role', { required: true })} className="input">
              <option defaultValue="Rockerboy">Rockerboy</option>
              <option value="Solo">Solo</option>
              <option value="Netrunner">Netrunner</option>
              <option value="Techie">Techie</option>
              <option value="Media">Media</option>
              <option value="Cop">Corporate</option>
              <option value="Fixer">Fixer</option>
              <option value="Nomad">Nomad</option>
            </select>
          </div>
          <div className="avatar">
            <input type="file" {...register('avatar')} />
          </div>
          <div className="avatar">
            <input type="submit" />
          </div>
        </div>
      </form>
    </div>
  );
}

export default PlayerCreatePage;

Answer 1

给你的html 和body 一个完整的浏览器高度：

html,body{height:100vh}

更多关于vhmdn