使用CSS计算高度铺满屏幕

news/2024/2/25 19:18:15/文章来源:https://blog.csdn.net/2201_75499330/article/details/135642404

前言

今天写项目时出现高度设置百分百却不占满屏幕,第一反应看自己设置的是块级元素还是行级元素。看了几篇博客,发现并不能解决问题。脱离文档流的做法都没考虑,前期模板搭建脱离文档流,后面开发会出现很多问题。
在这里插入图片描述
以上图片是我要解决的问题

正文

目前使用的是vue3+setup语法糖

解决方案一:用窗口高度动态计算高度

在html里动态绑定高度样式
在这里插入图片描述

  • window.innerHeight获取窗口高度
    在这里插入图片描述
    在这里插入图片描述
    注意
    使用了几种高度,如screen.height, body.offsetheight等但都有一些问题。
  • document.body.clientHeight:网页可见区域高
  • document.body.offsetHeight:网页可见区域宽(body),包括border、margin等
  • document.body.scrollHeight : 网页正文全文高
  • window.screen.height : 屏幕分辨率的高

以上body.xx都会出现高度为0的情况,在主页body高度设置百分百无效,需要给body设置具体高度。
window.screen.height 会出现滚动条情况。

解决方案二:calc()函数

height:calc(100vh),100vh = 视窗高度的100%,可使得div的高度自动撑开到屏幕高度。
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_926293.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何优雅的进行异步编排

Future模式 Future模式是高并发设计和开发过程中常见的设计模式。它的核心思想是异步调用,对于Future模式来说,它不是立即返回我们所需要的结果,但是它会返回一个异步任务,将来我们可以通过这个异步任务获取到我们所需要的结果。…

Linux-ARM裸机(十一)-UART串口通信

无论单片机开发还是嵌入式 Linux 开发,串口都是最常用到的外设。可通过串口将开发板与电脑相连,然后在电脑上通过串口调试助手来调试程序。还有很多的模块,比如蓝牙、GPS、 GPRS 等都使用的串口来与主控进行通信的,在嵌入式 Linux…

基于信号完整性的PCB设计原则

最小化单根信号线质量的一些PCB设计建议 1. 使用受控阻抗线; 2. 理想情况下,所有信号都应该使用完整的电源或地平面作为其返回路径,关键信号则使用地平面作为返回路径; 3. 信号的返回参考面发生变化时,在尽可能接近…

wins安装paddle框架

一、安装 https://www.paddlepaddle.org.cn/install/quick?docurl/documentation/docs/zh/install/pip/windows-pip.html 装包(python 的版本是否满足要求: 3.8/3.9/3.10/3.11/3.12, pip 版本为 20.2.2 或更高版本 ) CPU 版:…

LLM论文:ALCE (Enabling Large Language Models to Generate Text with Citations)

这是一篇RAG领域的文章,原文在这:https://aclanthology.org/2023.emnlp-main.398.pdf 时间[Submitted on 24 May 2023 (v1), last revised 31 Oct 2023 (this version, v2)]背景LLM在信息搜索、生成带引用的文本时存在幻觉问题,即事实准确性…

《 乱弹篇(四)》

既然是“乱弹”,弹(谈)题便可以包罗万象;天上地下,飞的走的,你的我的他的事儿,甚至还有许许多多八竿子都打不着的怪涎事儿,都可成为弹(谈)资 。比如&#xff…

计算机毕业设计 | 大型SpringBoot宠物医院管理 宠物商城购物系统(附源码)

写在前面 Le Dao宠物医院管理系统是一个超大型的,完成度很高的,集宠物医疗、宠物美容、宠物交易、宠物周边等各种功能于一身的,权限涵盖普通用户、医生、化验师、美容师、仓库主管、采购员等多种角色于一体的大型宠物医疗,购物系…

Rust-Panic

什么是panic 在Rust中,有一类错误叫作panic。示例如下: 编译,没有错误,执行这段程序,输出为: 这种情况就引发了一个panic。在这段代码中,我们调用了Option::unwrap()方法,正是这个方…

【开源】基于JAVA语言的网上药店系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 药品类型模块2.3 药品档案模块2.4 药品订单模块2.5 药品收藏模块2.6 药品资讯模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 角色表3.2.2 药品表3.2.3 药品订单表3.2.4 药品收藏表3.2.5 药品留言表…

【Django开发】美多商城项目第2篇:Django用户注册和登录开发(附代码,已分享)

本系列文章md笔记(已分享)主要讨论django商城项目相关知识。项目利用Django框架开发一套前后端不分离的商城项目(4.0版本)含代码和文档。功能包括前后端不分离,方便SEO。采用Django Jinja2模板引擎 Vue.js实现前后端…

Kubernetes (K8S) 3 小时快速上手 + 实践

1. Kubernetes 简介 k8s即Kubernetes。其为google开发来被用于容器管理的开源应用程序,可帮助创建和管理应用程序的容器化。用一个的例子来描述:"当虚拟化容器Docker有太多要管理的时候,手动管理就会很麻烦,于是我们便可以通…

【SQL注入】SQLMAP v1.7.11.1 汉化版

下载链接 【SQL注入】SQLMAP v1.7.11.1 汉化版 简介 SQLMAP是一款开源的自动化SQL注入工具,用于扫描和利用Web应用程序中的SQL注入漏洞。它在安全测试领域被广泛应用,可用于检测和利用SQL注入漏洞,以验证应用程序的安全性。 SQL注入是一种…

初识OpenCV

首先你得保证你的虚拟机Ubuntu能上网 可看 http://t.csdnimg.cn/bZs6c 打开终端输入 sudo apt-get install libopencv-dev 回车 输入密码 回车 遇到Y/N 回车 OpenCV在线文档 opencv 文档链接 点zip可以下载,点前面的直接在线浏览,但是很慢 https…

k8s云原生环境搭建笔记——第二篇

目录 1、使用普通方式安装prometheus和grafana1.1、安装kube-state-metrics容器1.1.1、下载并修改yaml文件1.1.2、导入kube-state-metrics镜像1.1.3、执行yaml文件目录 1.2、安装node-exploer1.2.1、创建名称空间prometheus1.2.2、执行yaml 1.3、安装prometheus1.3.1、创建集群…

基于python集成学习算法XGBoost农业数据可视化分析预测系统

文章目录 基于python集成学习算法XGBoost农业数据可视化分析预测系统一、项目简介二、开发环境三、项目技术四、功能结构五、功能实现模型构建封装类用于网格调参训练模型系统可视化数据请求接口模型评分 0.5*mse 六、系统实现七、总结 基于python集成学习算法XGBoost农业数据可…

多行SQL转成单行SQL

如下图所示 将以上多行SQL转成单行SQL 正则表达式如下 (?s)$[^a-zA-Z()0-9]*结果如下 灵活使用,也未必只能使用Sublime Text 提供了一个在线工具

[Docker] Docker为什么出现

Docker为什么出现 一款产品: 开发–上线 -->两套环境 | 应用配置 开发即运维! 环境配置十分麻烦,每一个机器都要部署环境(Redis, ES, Hadoop) 费时费力 项目带上配置环境安装打包。 传统: 开发jar&…

基于pyqt5+scapy 根据ip 具体端口 进行扫描 的程序

先给出代码 import sysfrom PyQt5 import uic from PyQt5.QtWidgets import *from scapy.all import * import argparse import logging from scapy.layers.inet import IP, TCP from scapy.sendrecv import sr1class MyWindow(QWidget):def __init__(self):super().__init__(…

AI人工智能工程师证书专业认证培训班有用吗?

当然有用,它即让自身技术技能有所提升,也拿到行内有含金量的证书,让自己在选择职业、升职加薪中更有竞争力。但是要擦亮眼睛,建议大家如果要找人工智能培训,就找性价比较高的培训班, 人工智能AI培训班怎么…

IP风险画像:源头防范网络攻击的全面策略

在当今数字化的时代,网络攻击呈现多样化和复杂化的趋势,为了确保网络的安全,制定全面的IP风险画像并从源头防范网络攻击是至关重要的。ip数据云将探讨如何通过建立IP风险画像来识别和应对潜在的威胁,从而实现更加安全可靠的网络环…