如何让body及里面的div、表格等自动适应屏幕高度

最新推荐文章于 2023-02-12 22:28:42 发布
原创 最新推荐文章于 2023-02-12 22:28:42 发布 · 6.7k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#div #html
本文介绍了一种网页表格实现全屏显示的方法。作者最初尝试将表格的高度设置为100%，但未能达到预期效果。最终发现还需将body及html标签的高度都设置为100%才能实现表格全屏。

今天我做一个表格在页面里，想要这个表格自动适应屏幕的高度，把他的高度设为了100%,style="height:100%",但设了之后，表格显示不出来，于是我想可能是body的高度还要设为100%吧，但设了之后还是没变化。最后找了我们的项目发现，除了body要设为100%外，还要把body的上级标签<html>也要加上100%，搞定了。<html style="100%">。

自适应表格，适用于PC，手机同一页面
08-31
PC，手机访问会调整为最佳的显示效果，并不是表格缩小而已，而会自动把结构调整为该设备最佳显示效果。
解决layui 数据表格固定列与表格不对齐，高度不一致
hu104160112的博客
02-04 7124
大家可能遇到过这种情况，表格的固定列高度和表格不一样 原因：表头或者标题数据换行，导致高度不一致 解决：在表格的done 回调中 done: function (index, layero) { //表头部分 //动态监听表头高度变化，冻结行跟着改变高度 $(".layui-table-header tr").resize(function () { $(".layui-table-header tr").each(function
三种Div高度自适应的方法
08-02 2599
让DIV高度自适应，这是在网页设计中常遇到的问题，为了给大家提供参考，这里提供3种div高度自适应的方法：一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）。 1、JS法 代码如下。原理：用JS判断左右DIV的高度，若不一致则设为一致。前端资源分享 01 &lt;div style="width:500px;background:#cccccc;height:0p...
解决Layui 表格自适应高度的问题
钟长森的博客
09-15 4196
<style> .layui-table-cell{ display:table-cell; vertical-align: middle; } </style> 成功解决问题，不要在field中添加高度，可以自行设置宽度，这样就可以让表格自适应高度 转自https://www.jb51.net/article/174273.htm ...
【无标题】手机端表格自适应
奔跑的五花肉灬
04-27 570
<!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" /> <titl
使一个 div 填充剩余屏幕空间的高度
HuntsBot的博客
01-03 3517
我正在开发一个 Web 应用程序，我希望内容填满整个屏幕的高度。该页面有一个标题，其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容 div 将页面的其余部分填充到底部。我有一个标题 div 和一个内容 div。目前我正在使用一个表格进行布局，如下所示：CSS 和 HTML#page { 高度：100%;宽度：100% } #tdcontent { 高度：100%; } #content { 溢出：自动； /* 或溢出：隐藏； */ } ... ...页面的整个高度被填满，不需要滚动。对于
Vue-实现自适应屏幕高度的方法
小柠檬爱编程
05-26 6702
项目中使用的element-ui的table组件，让它的高度自适应屏幕的高度，代码如下： html: <div class="tablebox" v-bind:style="'height:' + (bodyHeight - 170) + 'px'"> <el-table :data="tableData" style="width: 100%;" :height="bodyHei
ElementUI表格el-table表头固定自适应高度解决方案
热门推荐
web前端开发
01-06 1万+
来源 |https://wintc.top/article/54ElementUI、iView都以相同的方式提供了表格组件表头固定的方法，即设置组件的height属性。表头固定很重要，...
vue ant desgin 中 table自动高度
走错路的程序员
11-28 2059
vue ant desgin 中 table自动高度 <template> <div> <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="发货单" sub-title="12" @back="() => null" > </a-page-header> <div class="table-op
为什么定义<!doctype html>表格高度变高,<!DOCTYPE html>声明下div高度100%
weixin_29419979的博客
07-16 254
问题：在HTML页面中声明，页面中div属性设置100%页面显示不正常body {max-width: 720px;margin: 0 auto;}.case {background-color: #68CDD5;height: 100%;}页面中case为最大的div的class，设置了height:100%，页面并未正常显示，蓝色部分并未铺满整个页面。原因：在HTML5标准要求高度或宽度设置成...
Element 中根据屏幕大小动态计算表格高度以实现固定表头
分享前端工程化、动效魔法与性能之舞！
01-26 2481
在Element UI的表格组件中，要想固定表头，必须给表格指定一个高度，但是用户的屏幕大小是不一样的，为了能将表格底部的分页区域始终显示在屏幕内，就需要动态计算表格的高度。 以下是代码实现： <template> <div class="table-container"> <!-- 1. 绑定动态计算的表格高度 --> <el-table :data="data" style="width:100%" :height=
JS获取网页高度及屏幕分辨率高度让DIV层始终在页面最底部
piaoyi_online的专栏
10-16 5259
用法：将以下代码保存为HTML格式的页面即可。实现的功能：当页面里内容的高度没有让页面出现滚动条时，页面当前页面的最底部显示。当出现滚动条后，DIV层会自动向下跟随，在页面的最底部显示。更改TABLE的高度就可以看到DIV层始终在页面最底部DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
js结合vue操作dom元素 动态设置table表格的高度实例
子非渔
10-31 1911
<template> <div id="app"> <div :style="{width: `${screenWidth}px`}"> <router-view/> </div> </div> </template> <script> export default...
vue dialog弹出框随屏幕改变高度
css_javascrpit的博客
07-29 5860
element的弹出框高度自适应
2021年Element 中根据屏幕大小动态计算表格高度以实现固定表头
码蝗的博客
03-22 613
在Element UI的表格组件中，要想固定表头，必须给表格指定一个高度，但是用户的屏幕大小是不一样的，为了能将表格底部的分页区域始终显示在屏幕内，就需要动态计算表格的高度。 以下是代码实现： <template> <div class="table-container"> <!-- 1. 绑定动态计算的表格高度 --> <el-table :data="data" style="width:100%" :height="...
如何让表格在超出高度出现滚动条
Kaspar_w的专栏
06-30 8363
滚动条，在很多地方都有，而且可能展现的方式不一样，或者功能需求也不一样。但总体而言，想要实现这样的功能需要在表格外面定义一个div,并且设置div高度，overflow:scroll; 我自己做的例子：.可以实现纵轴滚动条。如果想要横轴也要出现滚动条，加上overflow-x:auto;就可以了。 注：在编辑html的时候
element表单搜索框与表格高度自适应
qq_43145310的博客
02-12 2507
表单搜索框与表格高度自适应
html自动缩放屏幕高度,关于html：如何将内容缩放到屏幕宽度
weixin_39640762的博客
05-30 730
考虑以下示例：为了使#content div水平对齐，我手动将主体缩放比例调整为60％((内容div不能环绕或滚动，并且内容不限于文本，它包含更多的div，表格，跨度， 等等。在示例中，我仅使用文字来演示溢出)body{zoom:60%}#content{overflow-x: hidden;white-space: nowrap;}THIS CONTENT HAS TO FIT HORIZONT...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值