html中div设置屏幕的高度占比

最新推荐文章于 2024-10-10 17:36:40 发布

学习历程记录

最新推荐文章于 2024-10-10 17:36:40 发布

阅读量1.3k

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_42084322/article/details/114104113

版权

首先，看一个例子

在一个div 中内嵌了一个div并设置了高度，我现在想要将外层的div设置为屏幕的高度使用了height= 100%，看结果

可以明显的看到，设置height=100%，只是这个div中内容的高度，如果没有内容，这个height=100%，显示到页面上的结果就是不显示。

当我们把height=100% 换成 height = 100vh，看结果

可以看出，使用height = 100vh 占用了屏幕的100%

vh为视口单位，什么是视口单位可以参考这篇文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

学习历程记录

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

css 深入理解height:百分比效果

qq_38109594的博客

09-09

2770

项目中经常需要子元素宽高需要根据父元素宽高来定位，就有时候遇到height:百分比不生效，但是网上一查说父元素必须要有固定的高度，以前没有总结下来。蚊子虽小也是肉啊，今天特意记录下。首先：下面例子1： <body> <div class="div"> <div> <div class="divchild">...

.net 设置div居中占整个屏幕的80%

weixin_46076053的博客

10-07

1099

.net 设置div居中占整个屏幕的80% A.aspx 页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="news_show.aspx.cs" Inherits="news_show" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

参与评论您还未登录，请先登录后发表或查看评论

html 按屏幕百分比设置div高度

拾荒者

06-10

2049

使用vh设置div高度占比例子： <div style="background-color: black;height: 90vh" v-html="log"> <div style="padding-bottom: 200px;">{{log}}</div> </div>

html中＜div＞标签设置宽度和高度都有哪些方法

最新发布

servepeople的博客

10-10

2161

在 HTML 和 CSS 中，设置<div>标签的宽度和高度有多种方法，取决于你希望如何控制它的尺寸。

获取当前div中的所有div的个数和每一个div的ID and 根据屏幕分辨率计算高度

diaobianpan6784的博客

10-18

214

var tabs_Count=document.getElementById("tabs-panels").getElementsByTagName("div").length; var genTab_PanelID=null; for(var i=0;i<tabs_Count;i++) { ...

设置div高度等于屏幕高度

大前端

12-02

7059

设置标签高度等于屏幕高度原因：浏览器默认html和body是没有高度的。或者说高度是auto的。解决方法：html, body{ height: 100%; }

div高度百分比

11-07

4365

在用百分比的时候，一定要确定父亲节点的高度（宽度是同样的道理）；比如：如果给div2设置height:100%;,那么必须明确div1的高度，否则div2的100%，就无法确定，如果要充满整个浏览器窗口，那么就要设置所有的长辈节点都为100%，比如：如果想让div2设置100%达到充满整个浏览器窗口的效果，必须设置它所有的长辈节点为100%,也就是

js实现鼠标拖动同时改变两个盒子的高度

weixin_45919023的博客

05-12

774

可视区域里，有顶部固定的区域，下边有两个盒子，通过鼠标拖动让两个盒子高度改变，不要改变body的高度，并且下边盒子可以切换隐藏和显示代码是这样的注意：需要引入jquery.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.

怎么让div盒子撑满整个网页

weixin_48047636的博客

04-12

1811

HTML代码 <body>  <div class="box"></div> </body> 第一种方法–>设置html和body宽高为100% <style> html,body{ width: 100%; height: 100%; } .box{

内容不足以铺满屏幕高度时,footer居底显示,如何页面铺满了则在内容最下面,4种方法

怎么写，解决问题的博客

06-19

2132

这篇在浏览博客时看到的，转载了他的文章 https://blog.csdn.net/u012076852/article/details/53068082 同样话不多说，直接上代码方法一： html： <div class="page"> 主要页面 </div> <footer>底部</footer> css: html,bod...

根据屏幕大小动态确定盒子大小，自适应屏幕

SYFCady的博客

08-12

2426

根据屏幕大小动态确定盒子大小功能描述

Div高度的百分比问题

tterminator的专栏

08-17

1500

转载自http://blog.163.com/m13864039250_1/blog/static/213865248201391012657561/ 总结：Div设置高度为百分比的时候则外层的元素必须指定height属性 1.简单外层div xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" c

html怎么占全屏高度,css常见问题（1）之全屏高度

weixin_36463040的博客

06-17

2172

例如一个页面一个元素需要占百分之百高度或者两个元素需要各占50%高度，直接给元素加上height:100%，在父元素有固定高度情况下可行的。没有父元素也就是说父元素就是body，这时候需要给页面的html以及body设置高度，再给元素设置百分比高度。html,body{height: 100%;margin: 0; /* 需要清除body自带的外边距 */}.divTest_one,.divTes...

如何使一个盒子能适应屏幕大小，且在屏幕正中？

z2911427924的博客

01-22

1392

如何使一个盒子能适应屏幕大小，且在屏幕正中？首先要给该盒子一个绝对定位 postion:absolute; 然后有两种方法 1. position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; 2. position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); 效果如下 <!DOCTYPE html

屏幕缩放比例 html,css如何自适应屏幕大小？

weixin_42353187的博客

06-14

6831

css如何自适应屏幕大小？下面本篇文章给大家介绍一下使用CSS实现屏幕大小自适应的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css如何自适应屏幕大小？要想实现css屏幕大小自适应，首先得引入 CSS3 @media 媒体查询器。只需在CSS中添加@media screen属性，针对不同设备的宽度进行编写CCS样式，根据浏览器宽度判断判断样式文件并输出不同的宽度值。med...

响应式布局改变div所占比例

你的孤独，虽败犹荣的博客

11-30

2078

#inner{ width: 1200px; margin: 0 auto; } #left{ width: 50%; height: 400px; background: re

html页面怎么让高度充满屏幕,怎么让一个页面高度占整个屏幕的_html/css_WEB-ITnose...

weixin_36465108的博客

06-18

1928

比方说,我现在做一个登录的界面,我想根据用户不同大小的屏幕,让整个页面的高度都满屏,我设置height:100%,无效啊,宽度还是可以,谢谢据说可以用js先获取当前用户的分辨率,然后设置我不会,然后这个方法我觉得不好用,有其他的办法吗?要是做前端不会js怎么弄呢?回复讨论(解决方案)首先定义html{height:100%}ie早期版本可能不支持首先定义html{height:100%}ie早期版...

怎么让html高度是整个屏幕,怎么样在窗体加载的时候让一个div的高度为屏幕的高度...

weixin_35417196的博客

06-15

371

html head title改变div高度/title script type=text/javascript src=js/jquery-1.8.3.min.js/script script type=text/javascript $(function(){ //为div设置边框 $(#container).css(border,1px solid gray); //改变div的高度 $(#...

如何使浏览器窗口的 div 高度为 100%

HuntsBot的博客

01-02

1120

我有一个包含两列的布局 - 左 div 和右 div。右边的 div 有一个灰色的 background-color，我需要它根据用户浏览器窗口的高度垂直展开。现在，background-color 结束于该 div 中的最后一段内容。我试过 height:100%、min-height:100%; 等。

html div设置高度和当前屏幕高度相等

03-31

可以使用CSS属性vh (viewport height)来设置div的高度与当前屏幕高度相等。例如，设置一个div的高度为100vh，就会使它的高度等于当前屏幕的高度。 ```html <div style="height: 100vh;">这是一个高度与屏幕相等的...