html页面div高度相减,关于html:两个div底部div到高度调整与浏览器窗口
本问题已经有最佳答案,请猛点这里访问。
我在它下面有一个头分区和一个分区。我需要在头DIV下面的DIV根据浏览器窗口大小的高度进行调整。
在CSS中,当我添加height:100%时,它会在页面的侧面创建一个滚动条。当我调整宽度的百分比时,页面底部的间距会不断变化,因为它是用百分比完成的。
我希望标题下面的DIV总是随窗口的高度而调整,底部没有间距。
我该怎么做?
这是小提琴
JS小提琴我不知道为什么,但在jfiddle中底部的DIV没有延伸高度:100%
代码如下:HTML
Header
Bottom Div
CSS
.main {
width:100%;
height:60px;
border: solid;
}
.left {
height: 100%;
width: 300px;
border:solid;
}
尝试使用类似于此代码的内容
HTML:
Header
Bottom Div
CSS:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
}
body {
padding:60px 0 0 0; /* 60 — header height*/
margin:0;
}
.main,
.left {
border:1px solid #000;
}
.main {
width:100%;
height:60px;
margin-top: -60px; /* 60 — header height*/
}
.left {
height: 100%;
width: 300px;
}
正是我要找的!非常感谢。
您有几个选项来实现您想要的布局。
从这个类似的问题中,有很多答案可以解决您的问题:使一个DIV填充剩余屏幕空间的高度
但是,我的解决方案是:只需稍微更改您的CSS
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
width:100%;
height:60px;
border: solid;
position: absolute;
background-color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
height: 100%;
width: 300px;
border:solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 60px;
}
框大小调整将阻止填充顶部和边框将尺寸推到浏览器窗口之外。身体,HTML高度:100%,需要允许其他项目100%的高度(为什么你的小提琴不工作)。
在样式表中试试这个
CSS
.left {
height: 100vh;
width: 100%;
border:solid;
}
参考链接https://stackoverflow.com/questions/1622027/percentage-height-html-5-css
CSS允许您进行一些基本的数学运算,因此以下内容将帮助您:
假设您的收割台固定高度为60px:
.left {
height: calc(100% - 60px);
}
编辑:在计算时,您可能还需要考虑一些额外的填充和边框。虽然我不太喜欢这样的硬编码值。
这对我来说是一个可能的解决方案,但并没有完全按照我想要的方式来解决,但非常感谢你的帮助!
html页面div高度相减,关于html:两个div底部div到高度调整与浏览器窗口相关推荐
- html 两个时间戳相减,表格里两列时间点如何相减
EXCEL表中如何让两列时间相减 两列时间,格式是常规,显示如:24时20分,如果我直接相减(比如C1=A1-B时间是特殊的数值形式,直接相减即可 Excel版本参考:2010 测试数据在A1和A2单 ...
- 数据库两时间类型相减_sql中两个时间类型相减得到的值
今天有人把数据库两个time类型的字段查出来并做了减法,得到一个长形的数字.这个数字是什么? 首先在数据库里建立一张test表(mysql的数据库) CREATE TABLE `NewTable` ( ...
- mysql 时间相减取秒_MySQL两个日期字段相减得到秒的方法
一.MySQL中两个DateTime字段相减 假定表名为tblName,两个DateTime字段名分别为beginDateTime,endDateTime,以下是相关两个mysql日期字段相减的SQL ...
- CSS div footer,网站Footer导航完美自动固定在底部div+css
网站Footer导航完美自动固定在底部div+css,为啥要添加完美呢?因为马上过年,我们需要一个比今年更完美一点 我们在设计网页的时候,都会遇到一个问题: 我底部导航要在底部,用position: ...
- 两个数组对应数相减java_Java 将两个数组相减(按组件)
// 来自 n o w j a v a . c o m - 时代Java //package com.nowjava; public class Main { public static void m ...
- 数据库时间相减_SqlServer 中两时间相减 DATEDIFF()
DATEDIFF 返回跨两个指定日期的日期和时间边界数. 语法 DATEDIFF ( datepart,startdate,enddate ) 参数 datepart 是规定了应在日期的哪一部分计算差 ...
- C语言显示无法添加两个指针,【C语言】两个指针(地址)相减
两个指针相减,为两个指针之间间隔这两个指针类型的数目. 如:int *p,*q; p-q=(p地址-q地址)/sizeof(int) #include int main() { int a[]={,, ...
- 日期相减计算年_Excel教程:excel日期问题的小妙招
提示:小程序可以高清看本公众号视频教程 苹果iOS用户请微信扫码学习 1.怎么快速输入当前日期? 函数: 输入公式:=TODAY() TODAY函数:返回日期格式的当前日期. 搜狗输入法: 在搜狗输入 ...
- oracle日期相减工作日_Oracle 计算两个日期间隔的天数、月数和年数
在Oracle中计算两个日期间隔的天数.月数和年数: 一.天数: 在Oracle中,两个日期直接相减,便可以得到天数: select to_date('08/06/2015','mm/dd/yyyy' ...
最新文章
- mysql的字符串函数大全_MySQL的字符串函数大全
- C#基础知识梳理系列十:异常处理 System.Exception
- 芯片的反向流程是怎么样的?
- 如何编写更好的POJO服务
- 网络爬虫--5.urllib库的基本使用(1)
- 含枚举类型的函数声明_02Golang基础类型
- 95-150-045-源码-Sink-Streaming Parquet File
- Java将json格式数据转换为对象
- 自己开店用什么收银系统好-纳客收银系统
- Bluecoat代理设备维护手册
- 强化学习——强化学习的算法分类
- 野人岛4四季神器java,十一天,四季的感受,顶风冒雪美国中西部自驾旅游之五-黄石:梦想之地(1)...
- php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
- 电子计算机的基本结构基于存储程序,计算机有答案
- 四种物联网卡计算模式
- html中音频文件放在JS哪里,javascript – 将音频文件保存在rails中
- 使用Synology群晖内置web station和榴莲壳发布自己的网站(三)如何访问自己服务器里的网页
- 从浙政钉-企业微信-钉钉同步数据步骤
- tf.data 加载 pandas dataframes
- Ripple(瑞波)会是下一个金融科技巨头吗?
热门文章
- STM32F103mini教程学习总结与心得(三)---->中断
- 雪花算法id长度_分布式全局ID生成器(雪花算法golang无锁版)
- linux计划任务一小时,linux,计划任务,每小时执行一次(共7篇).docx
- druid 手动指定数据源_Spring Boot2 系列教程(二十)整合JdbcTemplate 多数据源
- .aspx IIS发布404.17时候的问题
- placeholder字体大小以及颜色的修改
- Qt Project Build error PRJ0019: 工具从Moc'ing xxx.h...
- 23亿美元大市场,NFV做好了准备吗?
- java连接mysql数据库 R_Java连接Mysql数据库详细代码实例
- 回车提交、连续点击、layer提示