[原]CSS中全屏高度自适应

最新推荐文章于 2024-01-17 12:02:56 发布
最新推荐文章于 2024-01-17 12:02:56 发布
阅读量566 收藏
点赞数
分类专栏： css笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pandarawen/article/details/8149914
版权
body {
position:absolute;
background-color:#000;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}

#container {
height:100%;
position:absolute;
}
#leftDiv {
height:100%;
width:300px;
position:absolute;
background:#FFFFFF;
}
PandaraWen
关注
专栏目录
CSS背景图片自适应大小
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-06 9239
在CSS中，如果你想让背景图片自适应元素的大小，你可以使用。应该被替换为你想要应用背景图片的元素的选择器。应该被替换为你的图片文件的路径。
css常见问题（1）之全屏高度
qq_29039105的博客
07-15 629
例如一个页面一个元素需要占百分之百高度或者两个元素需要各占50%高度，直接给元素加上height:100%，在父元素有固定高度情况下可行的。没有父元素也就是说父元素就是body，这时候需要给页面的html以及body设置高度，再给元素设置百分比高度。 <body> <div class="divTest_one"> </div> <div class="divTest_two"> </div> </body
使用CSS计算高度铺满屏幕
最新发布
菜就多练
01-17 1642
今天写项目时出现高度设置百分百却不占满屏幕，第一反应看自己设置的是块级元素还是行级元素。看了几篇博客，发现并不能解决问题。脱离文档流的做法都没考虑，前期模板搭建脱离文档流，后面开发会出现很多问题。以上图片是我要解决的问题。
微信小程序 页面除去头部和底部，中间高度铺满剩余部分的解决方案
qq_38337245的博客
11-15 4552
做这么一个界面，让中间紫色和橙色部分的内容铺满在中间位置，并且让橙色部分位置固定不动，紫色部分内容超出时滚动，如图： 首先如何做到呢？ 我使用了定位position：fiexed;让它撑满（关键代码）， position: fixed;top: {{topHeight + 30}}rpx;left: 25rpx;right: 25rpx;bottom:30rpx; 然后通过计...
CSS全屏布局的6种方式
QDY5945的博客
10-16 361
前面的话 　　全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的6种思路 float 【1】float + calc 　　通过calc()函数计算出.middle元...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 937
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
css 高度自适应的问题示例探讨
09-25
在CSS布局设计中，高度自适应（Height Auto-Adaptation）是一个常见的需求，尤其是在创建响应式网页或者希望内容能够填充整个屏幕时。然而，直接使用`height: 100%`并不总是能实现预期的效果，这主要是由于CSS中的...
CSS 实现高度自适应铺满整屏的实现
01-18
在自己写demo的过程中，想使用display:flex实现垂直居中，代码如下： <style> #login{ width:100%; height: 100%; display: flex; justify-content: center; align-items: center; } .login-body{ ...
灰色全屏图片画廊自适应css模板-灰色 自适应
11-09
在这个模板中，CSS3的媒体查询是实现自适应设计的关键，它可以根据设备的不同特性（如屏幕宽度）来应用不同的样式。此外，高斯模糊效果可能通过CSS的`filter`属性中的`blur()`函数实现。 3. **全屏图片画廊**： ...
CSS实现网页背景图片自适应全屏的方法
12-09
为了适应不同设备的屏幕尺寸，并保证图片不因拉伸而失真，我们需要使用CSS来实现背景图片的自适应全屏显示。本文将详细解析如何通过CSS来达成这一目标。 首先，我们需要在HTML中创建一个div元素作为背景图片的容器...
CSS技能点--元素高度占满视窗
程序员大阳
07-12 5750
我们经常会遇到，需要将网页内容铺满当前窗口的需求。 很多时候，通过CSS去控制比较麻烦，尤其是窗口高度是动态可变的时候。 往往我们会通过JS去动态设置，但是实际上还有一种更佳简便的方式。
CSS-宽高自适应
2301_80864686的博客
11-04 7909
父元素不设置高度，默认的高度是被子元素撑开的，如果子元素添加浮动，父元素的高度会降低，这种降低的效果被称为高度塌陷—会影响布局。（2）如果添加了盒子模型，auto+数值=auto，不会把盒子撑大；（1）概念：元素不设置宽度，宽度默认是被子元素或者是文本撑开：width默认值为:auto。2、使用方法：用于动态的计算宽度和高度，里面有两个参数calc(参数1 - 参数2)/* 自适应宽度的盒子+盒子模型（外边距）仍然是自适应，不会被撑大 */（2）方法2：使用自适应的方法来完成两栏布局。
css 高度自适应铺满全屏
new_abc的专栏
04-03 1万+
html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>dddd</title> <link rel="stylesheet" type="text/css" href="test.css" /> <...
如何div高度占满全屏（自适应）
热门推荐
往前的娘娘
10-12 7万+
概述：记录一下，别人已经写得比较好了，下次方便检索 网址：http://www.cnblogs.com/pangguoming/p/5695184.html
css如何用height:100%设置全屏
poplau的专栏
04-23 9386
在符合标准的 XHTML 模式下，将 DIV 的高度简单的设置为 100% 往往并不能达到想要的效果，原因是“百分比”是个相对于父节点的值，如果你没有设置他们的父节点的高度，那么设置 DIV 的高度为100%就没有了意义。  精华  例子:  body{  font-family:"宋体";font-size:12px; line-height:18px;height:100%;}  #loadi
html css页面满屏,CSS实现DIV高度height全屏布局.html
weixin_29798625的博客
06-04 1359
三列布局* {margin: 0;padding: 0;}body {height: 100%;}html {height: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 80px 0 35px 0;overflow: hidden;}#header {...
CSS解决高度自适应问题
weixin_30613343的博客
03-20 2994
高度自适应问题，我很抵触用js去解决，因为不好维护，也不够自然，但是纯用CSS，难度不小，比如下面我要说的例子。 需求： 1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条 2. 绿色部分高度固定，比如50px 3. 紫色部分填充剩余的高度 HTML结构暂且如下： <div id="main"> <div id="nav">nav&...
html怎么占全屏高度,css常见问题（1）之全屏高度
weixin_36463040的博客
06-17 2171
例如一个页面一个元素需要占百分之百高度或者两个元素需要各占50%高度，直接给元素加上height:100%，在父元素有固定高度情况下可行的。没有父元素也就是说父元素就是body，这时候需要给页面的html以及body设置高度，再给元素设置百分比高度。html,body{height: 100%;margin: 0; /* 需要清除body自带的外边距 */}.divTest_one,.divTes...
css背景图片全屏铺满自适应
09-26
可以使用CSS3中的background-size属性来实现背景图片全屏铺满自适应的效果。具体实现方法如下： ```css body { background-image: url("your-image-url"); background-size: cover; /*将图片等比例缩放，使图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值