css 如何设置flexbox以填充剩余高度并位于屏幕中间？

fnatzsnv 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(197)

我试图将登录容器设置在屏幕中间的剩余高度上，似乎justify-content将内容设置在中心，然而，align-items: center在这种情况下不起作用，即使我将容器设置为height to 100%。
我也试过设置身体的高度为100%，但如果你调整窗口大小，它会溢出导航栏，而且在全屏时你可以滚动一点，我不想这样。
我用的是tailwindcss。我也试着在自定义css中复制它，但它不起作用。
我该怎么解决这个问题？我只是想类似的东西，当你去谷歌登录。

html {
  height: 100%;
}

body {
  min-height: 100%;
  overflow-x: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="antialiased text-slate-400 bg-slate-900">
  <div class="h-full">
    <!-- Navbar -->
      <nav
        class="w-full flex justify-between items-center px-10 py-4 border-b border-b-slate-700">
        <a href="/" class="relative text-3xl text-slate-200 font-bold tracking-wider" >Navbar</a>
        <ul class="flex gap-5 cursor-pointer">
            <li>
                <a href="/" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100"  >Home</a>
            </li>
            <li>
                <a href="/login" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Login</a>
            </li>
        </ul>
    </nav>

      <!-- Login -->
      <div class="h-full flex justify-center items-center">
        <div class="w-[350px] flex flex-col justify-center items-center space-y-10 px-10 py-10 border border-slate-700/50 shadow-lg rounded-lg">
            <h3 class="mb-5 flex justify-center items-center text-2xl font-bold text-sky-500 cursor-default">Login</h3>
            <form class="flex flex-col justify-center gap-3">
                <label for="username" class="font-semibold">Username</label>
                <input
                    type="text"
                    name="username"
                    id="username"
                    class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
                    placeholder="Enter your username"
                />
                <label for="password" class="font-semibold">Password</label>
                <input
                    type="password"
                    name="password"
                    id="password"
                    class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
                    placeholder="Enter your password"
                />
                <div class="w-full flex flex-col justify-center items-center gap-5 mt-10">
                    <button class="w-full px-5 py-2 bg-sky-500 rounded-full font-semibold text-white hover:bg-sky-500/80 duration-300">Login</button>
                    <a href="/register" class="w-full px-5 py-2 bg-green-500 rounded-full font-semibold text-white text-center hover:bg-green-500/80 duration-300">Create an account</a >
                </div>
            </form>
        </div>
    </div>
  </div>
</body>
</html>

css

来源：https://stackoverflow.com/questions/76366377/how-to-set-flexbox-to-fill-the-remaining-height-and-be-on-the-middle-of-the-scre

2条答案

按热度按时间

ifmq2ha21#

您可以考虑：

通过h-full将height: 100%应用到<body>上，这样直接子节点<div>就可以用自己的h-full“获得”高度。
通过flex flex-col将display: flex; flex-direction: column应用于<body>的直接子节点<div>，以垂直布局的方式布局元素。

完成上述两项更改后，您可以：
通过grow将flex-grow: 1应用于<div>，紧跟在注解之后：

html {
  height: 100%;
}

body {
  overflow-x: hidden;
}

<script src="https://cdn.tailwindcss.com"></script>

<body class="antialiased text-slate-400 bg-slate-900 h-full">
  <div class="h-full flex flex-col">
    <!-- Navbar -->
    <nav class="w-full flex justify-between items-center px-10 py-4 border-b border-b-slate-700">
      <a href="/" class="relative text-3xl text-slate-200 font-bold tracking-wider">Navbar</a>
      <ul class="flex gap-5 cursor-pointer">
        <li>
          <a href="/" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Home</a>
        </li>
        <li>
          <a href="/login" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Login</a>
        </li>
      </ul>
    </nav>

    <!-- Login -->
    <div class="grow flex justify-center items-center">
      <div class="w-[350px] flex flex-col justify-center items-center space-y-10 px-10 py-10 border border-slate-700/50 shadow-lg rounded-lg">
        <h3 class="mb-5 flex justify-center items-center text-2xl font-bold text-sky-500 cursor-default">Login</h3>
        <form class="flex flex-col justify-center gap-3">
          <label for="username" class="font-semibold">Username</label>
          <input type="text" name="username" id="username" class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold" placeholder="Enter your username" />
          <label for="password" class="font-semibold">Password</label>
          <input type="password" name="password" id="password" class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold" placeholder="Enter your password" />
          <div class="w-full flex flex-col justify-center items-center gap-5 mt-10">
            <button class="w-full px-5 py-2 bg-sky-500 rounded-full font-semibold text-white hover:bg-sky-500/80 duration-300">Login</button>
            <a href="/register" class="w-full px-5 py-2 bg-green-500 rounded-full font-semibold text-white text-center hover:bg-green-500/80 duration-300">Create an account</a >
                </div>
            </form>
        </div>
    </div>
  </div>
</body>

或者通过my-auto将margin-top: auto; margin-bottom: auto应用于<div>，紧跟在注解之后：

html {
  height: 100%;
}

body {
  overflow-x: hidden;
}

<script src="https://cdn.tailwindcss.com"></script>

<body class="antialiased text-slate-400 bg-slate-900 h-full">
  <div class="h-full flex flex-col">
    <!-- Navbar -->
    <nav class="w-full flex justify-between items-center px-10 py-4 border-b border-b-slate-700">
      <a href="/" class="relative text-3xl text-slate-200 font-bold tracking-wider">Navbar</a>
      <ul class="flex gap-5 cursor-pointer">
        <li>
          <a href="/" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Home</a>
        </li>
        <li>
          <a href="/login" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Login</a>
        </li>
      </ul>
    </nav>

    <!-- Login -->
    <div class="my-auto flex justify-center items-center">
      <div class="w-[350px] flex flex-col justify-center items-center space-y-10 px-10 py-10 border border-slate-700/50 shadow-lg rounded-lg">
        <h3 class="mb-5 flex justify-center items-center text-2xl font-bold text-sky-500 cursor-default">Login</h3>
        <form class="flex flex-col justify-center gap-3">
          <label for="username" class="font-semibold">Username</label>
          <input type="text" name="username" id="username" class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold" placeholder="Enter your username" />
          <label for="password" class="font-semibold">Password</label>
          <input type="password" name="password" id="password" class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold" placeholder="Enter your password" />
          <div class="w-full flex flex-col justify-center items-center gap-5 mt-10">
            <button class="w-full px-5 py-2 bg-sky-500 rounded-full font-semibold text-white hover:bg-sky-500/80 duration-300">Login</button>
            <a href="/register" class="w-full px-5 py-2 bg-green-500 rounded-full font-semibold text-white text-center hover:bg-green-500/80 duration-300">Create an account</a >
                </div>
            </form>
        </div>
    </div>
  </div>
</body>

赞(0）回复(0）举报 2023-06-07

wa7juj8i2#

您应该将父对象的高度设置为h-screen，而不是h-full，这样它就占用了屏幕上的所有空间（100 vh）。然后在导航栏上设置固定高度（例如h-20，即5 rem）。
在登录表单周围添加一个div，并使高度为屏幕上的剩余空间（100 vh-5 rem）。将这个div设为flex，并在其上设置overflow-y-auto，以确保在空间不足时添加滚动条。
另外，将m-auto添加到登录div中，使登录表单垂直和水平居中。
Example in tailwind play.

<div class="h-screen text-slate-400 bg-slate-900">
    <!-- Navbar -->
      <nav
        class="h-20 w-full flex justify-between items-center px-10 py-4 border-b border-b-slate-700">
        <a href="/" class="relative text-3xl text-slate-200 font-bold tracking-wider" >Navbar</a>
        <ul class="flex gap-5 cursor-pointer">
            <li>
                <a href="/" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100"  >Home</a>
            </li>
            <li>
                <a href="/login" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Login</a>
            </li>
        </ul>
    </nav>
    <!-- Container with scrollbar: -->
    <div class="h-[calc(100vh-5rem)] overflow-y-auto py-4 flex">
      <!-- Login -->
      <div class="flex justify-center items-center m-auto">
        <div class="w-[350px] flex flex-col justify-center items-center space-y-10 px-10 py-10 border border-slate-700/50 shadow-lg rounded-lg">
            <h3 class="mb-5 flex justify-center items-center text-2xl font-bold text-sky-500 cursor-default">Login</h3>
            <form class="flex flex-col justify-center gap-3">
                <label for="username" class="font-semibold">Username</label>
                <input
                    type="text"
                    name="username"
                    id="username"
                    class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
                    placeholder="Enter your username"
                />
                <label for="password" class="font-semibold">Password</label>
                <input
                    type="password"
                    name="password"
                    id="password"
                    class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
                    placeholder="Enter your password"
                />
                <div class="w-full flex flex-col justify-center items-center gap-5 mt-10">
                    <button class="w-full px-5 py-2 bg-sky-500 rounded-full font-semibold text-white hover:bg-sky-500/80 duration-300">Login</button>
                    <a href="/register" class="w-full px-5 py-2 bg-green-500 rounded-full font-semibold text-white text-center hover:bg-green-500/80 duration-300">Create an account</a >
                </div>
            </form>
        </div>
    </div>
    </div>
  </div>

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何设置flexbox以填充剩余高度并位于屏幕中间？

2条答案

相关问题

热门标签

最新问答