在Tailwind中，如何将div的高度设置为屏幕的80%？
在Tailwind中，可以使用内置的CSS类来设置div的高度为屏幕的80%。可以使用以下步骤来实现：
- 首先，确保你已经在项目中引入了Tailwind CSS库。
- 在需要设置高度的div元素上添加以下CSS类：h-screen。这将使div元素的高度等于屏幕的高度。
- 接下来，使用内置的CSS类来设置div元素的高度为屏幕高度的80%。可以使用以下CSS类：h-4/5。这将使div元素的高度为屏幕高度的80%。
示例代码如下：
<div class="h-screen h-4/5">
<!-- 内容 -->
</div>这样，div元素的高度将被设置为屏幕高度的80%。
推荐的腾讯云相关产品：腾讯云云服务器（CVM） 产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
4回答
之前买的服务器可以退款么？
费用中心、5折上云
之前买的服务器可以退款么？你这活动力度好大啊
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=banner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 1592提问于2018-01-20
2回答
在TailwindCSS / React.js中控制英雄部分的高度
html、css、tailwind-css
我正在尝试创建一个网站使用第一次反应和尾风。
我想在屏幕顶部显示一个英雄部分，在屏幕底部显示Nav栏。
我这样做的策略是有两个独立的div。英雄部分在80 at，Navbar在20 at，以覆盖整页。
当我尝试设置它时，我尝试将我的英雄组件设置为这样：
const HeroSection = () => (
<div className="h-4/5 bg-green border-nft-gray-1">Hero Section</div>
);
export default HeroSection;
我使用h-4/5的文档对80%的屏
浏览 12提问于2022-06-20得票数 1
回答已采纳
1回答
顺风css flex-col-反向不起作用
reactjs、next.js、tailwind-css
我目前正在研究一个组件的响应式样式，其中在大屏幕上，我将div与文本元素放在包含img元素的div之上；在较小和中等屏幕上，将div与图像与文本元素对齐。我使用Next.js和Tailwind CSS进行样式设置。 样式在大屏幕上工作得很好，但是由于某些原因，当我的父元素中已经有flex flex-col-reverse时，带有文本元素的div却不能在小屏幕上显示 下面是整个代码的外观： import React from 'react'
import Image from 'next/image'
import catImage from '../a
浏览 41提问于2021-08-18得票数 0
回答已采纳
3回答
如何在保持填充的同时使元素达到完全高度？
html、css、tailwind-css
如何在保持填充的同时使下面的div元素(请参阅代码中的注释)达到完全高度？
我希望元素是完整的高度，而不是在屏幕上，并保持填充的其他元素。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta h
浏览 1提问于2021-07-06得票数 0
回答已采纳
3回答
在React中添加组件将导致水平滚动条
html、css、reactjs、tailwind-css
以下是添加Navbar组件之前的网站：
以下是添加新组件后的网站：
我不知道是什么属性导致了这种情况，但是下面是代码：
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// React entry point
const root = ReactDOM.c
浏览 0提问于2022-07-30得票数 2
回答已采纳
1回答
当试图将菜单安装到屏幕上时，顺风不会溢出
html、css、tailwind-css
完整片段：
试着把这个部分安装到屏幕上，左边的导航菜单
<main class="flex flex-grow w-full h-screen">
<aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm:block">
<div class="flex flex-grow flex-col justify-between h-full p-4 bg-gray-800">
<div class="
浏览 3提问于2022-04-17得票数 0
1回答
在Tailwind中，如何将div的高度设置为屏幕的80%？
css、tailwind-css
我在y轴上有一个溢出的div，并希望它恰好是屏幕高度的80%。现在我有了这个<div class="overflow-y-auto h-96">，它可以工作，但高度必须大于96，恰好是整个屏幕的80% (以便为页眉和页脚留出空间)。 使用h-4/5似乎行不通。 <div class="h-4/5 bg-yellow-200 overflow-hidden">
<div class="overflow-y-auto bg-yellow-500 space-y-3">
浏览 168提问于2021-08-10得票数 1
11回答
腾讯云上如何自建DNS？
云服务器、DNS 解析 DNSPod、linux、centos、dns
当前腾讯云私有域VPCDNS暂时还不支持背景下，怎么在腾讯云CVM环境下构建内网解析？
实现功能：
1.支持腾讯云云环境保留域名解析如：mirrors.tencentyun.com;
2.支持用户自有业务域名内部网解析如：you.aaa.com；
3.支持访问外网域名解析如：www.qq.com；
4.支持分域名转发到不同的DNS服务器；
基础环境：
CVM：标准型SA2（请根据自身业务情况，选择样本）
操作系统：CentOS Linux版本7.6.1810（核心）
绑定：bind-9.11.4-16.P
浏览 1385提问于2021-01-27
5回答
如何将云主机 迁移到私有网络？
云服务器、私有网络、官方文档
请描述您的问题
标题：私有网络和子网 - 私有网络 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/215/4927
浏览 1208提问于2018-02-06
4回答
请各位大给个参考方案，存储相关？
对象存储
200GB的档案，需要存放在腾讯云产品上，供第三方下载，第三方在200家左右。需要有WEB登录界面，账号权限分配，看了一下对象存储，流量收费有点贵。
除了对象存储，只能租用主机自己搭建FTP吗？还有其他方案吗？
如果自己租用主机搭建环境，对于200家下载需要选择多少的带宽能保障他们的下载速度呢？
浏览 717提问于2017-08-29
2回答
如何在顺风CSS中增加div像素的固定高度和宽度？
reactjs、tailwind-css
我正在和react和tailwind css一起工作。我想把100px height和width交给我的div。如果有人知道如何在tailwind css做这件事，请帮助我。提前谢谢。
浏览 11提问于2022-09-02得票数 0
2回答
基本页眉-导航栏-页脚-内容布局在尾风+ CSS？
html、css、flexbox、tailwind-css
我希望用Tailwind + CSS创建一个基本布局，具有固定高度的页眉、固定高度的页脚、固定宽度的导航条和内容填充其余部分，其中整个包含区域扩展以填充可用空间，如下所示：
我已经和混得这么远了
<div class="flex min-h-full w-full flex-col bg-slate-400 grow">
<div class="flex h-32 w-screen bg-red-400">Title</div>
<div class="flex h-auto w-screen
浏览 6提问于2022-08-31得票数 1
回答已采纳
1回答
如何在顺风中创建这种复杂的布局？
html、css、flexbox、tailwind-css
我想创建一个布局像下面的顺风。我不知道如何使蓝色区域有全宽度，但紫色区域有一个限制在9/12网格。
12列为最大1200 12。
这是我的代码：
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container lg:w-1200px bg-red-500 mx-auto flex">
<div class="w-3/12 bg-blue-5
浏览 0提问于2021-11-22得票数 1
回答已采纳
2回答
在顺风css v3中是否有针对第n个孩子的方法？
css、reactjs、tailwind-css
我总共有10个项目，我正在映射通过它们来呈现每一个。我希望最后一个元素的不透明度最小，第一个元素的透明度最高。我知道:first和:last在tailwind-css，但我想知道是否有办法让我的目标，比如我的第8或第9在tailwind-css
以下是来自组件的返回语句：
{[0,1,2,3,4,5,6,7,8,9].map((item) => (
<section
key={item}
cl
浏览 5提问于2022-11-08得票数 3
3回答
智能联想的使用示例呢？详见API/SDK使用？？ 没有啊，示例代码也没有？
云 API、官方文档
智能联想的使用示例呢？详见API/SDK使用？？ 没有啊，示例代码也没有
标题：智能联想 - 云搜 - 文档首页 - 腾讯云文档平台 - 腾讯云
地址：https://cloud.tencent.com/document/product/270/1201
浏览 422提问于2018-03-13
1回答
当内容滚动经过视口时，CSS背景不可见
html、css、flexbox、background-color、tailwind-css
我正在尝试创建一个css背景，无论内容高度如何，它在任何时候都是100%高的，并且当内容足够长以创建滚动条时，背景颜色在您滚动时保持不变。 无论我尝试哪种最小高度和高度的组合，我似乎都不能让它正常工作。 当我使用Tailwind的h-screen类时，当内容小于视区时，它会填充到页面的底部，但当有滚动条时，背景会在滚动的部分消失。 我在parent div/body/html上尝试了h-full和min-height: 100%的各种组合，但似乎都不起作用。 下面是一个有效的示例： https://jsfiddle.net/t30wo6uk/3/ 以下是演示的两个问题的屏幕截图： h-scr
浏览 29提问于2021-08-03得票数 0
回答已采纳
2回答
如何隐藏父div之外的内容？
html、css
我有以下代码片段：
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen w-32 bg-gray-300">
<aside class="grid grid-cols-2 bg-yellow-400 w-64 h-full">
<div class="bg-red-30
浏览 4提问于2021-07-29得票数 2
5回答
Svelte:指定多个条件类属性
svelte、tailwind-css、svelte-3
我希望这样的事情成为可能：
<div
class="overflow-scroll h-screen antialiased ..."
class:whiteTheme="bg-gray-100 text-gray-800 ..."
class:darkTheme="bg-blue-900 ..."
>
...
</div>
因此，将始终应用一组类。一个集合仅在whiteTheme为true时设置，另一个集合仅在darkTheme为true时设置。
我知道我可以定义一个whiteTheme和一个dark
浏览 0提问于2020-01-28得票数 8
3回答
生产中的Laravel应用程序是否需要Vite开发服务器？
laravel、windows、tailwind-css、vite、laravel-9
我参加了一个新的Laravel9，Vite3和TailwindCss3项目。
问题
仅仅使用npm run build并不足以部署应用程序！
当我不运行Vite的开发服务器时，我会得到以下错误：
无法在Vite清单中找到文件: resources/css/app.css。
但是当我使用npm run dev时，一切都很好！
再生产
我使用了以下命令：
laravel new vite-test --git &&
cd .\vite-test\ &&
npm i &&
npm install -D tailwindcss postcss aut
浏览 3提问于2022-07-20得票数 1
回答已采纳
2回答
使用不同图像大小的Nextjs图像组件
next.js、tailwind-css、nextjs-image
我正在尝试使用Next.js图像组件来处理所有具有唯一大小的图像。声明图像将延伸到父div宽度和高度。我试过包装它们，但不知道如何适应动态图像大小。我想有一个固定的宽度和高度来调整每一个比例。蒂娅。
这是我的代码(图像来自数组) --因为我没有高度设置，页面上没有任何渲染。如果我使用的是Tailwind的h-auto，它仍然不显示：
<div className="w-screen h-screen">
{allImages.allImages.map((image, i) => {
return (
<div className
浏览 3提问于2021-04-30得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
