设置HTML高度与视口一致

最新推荐文章于 2023-10-07 15:33:29 发布
最新推荐文章于 2023-10-07 15:33:29 发布
阅读量381 收藏 1
点赞数
分类专栏： Web前端 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rachel_CT/article/details/126025186
版权

简单记录一下如何设置HTML/body的高度与视口一致，以便于我们后面在对子元素设置高度的时候可以用百分比

<style>
html, body {
  height: 100%
}
</style>

以下分别是【设置了】和【没设置】该样式的时候，#content取 height:80% 的 效果

 

 

末木CT
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html+css移动端视口总结
05-09
1.什么是移动端 a)可以方便移动的设备都统称之为移动端，比如：手机、平板、手表等 2.开发一个移动端的页面最终是要呈现在手机上的，但是我们的开发人员在平时的开发过程中是要经常去做一些调试的，这个时候我们就可以利用浏览器给我们提供的手机模拟器开查看在手机上的效果。 右键----检查----找到设备模拟器切换窗口 3.设备模拟器里面内容介绍 a)iphone678======手机型号 b)375*667========手机屏幕的分辨率 c)75%============观看比例 d)旋转小图标======切换横屏和竖屏 e)右上角三个圆点=== i.capture screenshot 截取手机屏幕得相关设计稿（短图） ii.capture full size screenshot 截取手机屏幕相关设计稿(带有滚动条区域得所有) 4.常见设备的大小、屏幕的大小 a)iphone4========320*480 b)iphone5========320*568 c)iphone678======375*667 d)iphone678s=====414*736 5.获取设计稿得大小 a)
详解VC++中的窗口与视口
11-12
详解VC++中的窗口与视口
win程序窗口与视口关系
05-17
win程序窗口与视口关系，讲述win程序窗口与视口关系
《JS高程（3）》DOM2和DOM3-样式、视口尺寸问题-第12章笔记(23)
独茧
02-17 294
HTML定义样式3种方法： <link/>元素包含外部样式文件； <style/>元素定义嵌入式样式； 以及使用style特性定义针对特定元素的样式。 “DOM2级样式”模块就这3种应用样式机制提供了套API。确定浏览器是否支持DOM2级定义的CSS能力：var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");va
html 视口高度,css – 页面高度到100％的视口？
weixin_30938397的博客
06-23 408
我将开始说我对整个网络开发非常新鲜,这是我第一个响应敏捷的网站,所以请温柔地记住这一点,我在这个阶段就是noob这个词的定义.寻找答案一段时间,没有运气,我希望有人能帮助我.我正在为这个网站做一个主页.设计只是在页面左侧的一个块,显示顶部的标志,然后是下面的一系列链接,所有链接都在相同的背景上.右边是一个填满屏幕其余部分的大图.我想让整个页面填充浏览器的浏览器窗口,因此绝对不需要滚动,即宽度和高度...
Web 技术：CSS最小和最大(宽度/高度)知识点及优缺点
粉丝们务必加入微信粉丝群
07-15 6594
通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它...
html5 视口,HTML5 定义文档视口
weixin_32001433的博客
06-23 657
■知识点在移动Web开发中，经常会遇到viewport (视口)，即浏览器显示页面内容的屏幕区域。一般移动设备的浏览器默认都设置一个标签，定义一个虚拟的布局视口，用于解决早期页面在手机上显示的问题。iOS、Android基本都将这个视口分辨率设置为980px，所以桌面网页基本能够在手机上呈现，只不过看上去很小，用户可以通过手动缩放网页进行阅读。这种方式用户体验很差，建议使用标签设置视口大小。标签的...
html视口配置,如何设置视口？
weixin_30564897的博客
06-10 2345
在传统的PC端网页开发中，并没有使用过meta标签来设置视口，此时浏览器会按照默认的布局视口宽度来显示网页。如果我们希望自己开发的网页在浏览器中以理想视口的形式呈现，就需要利用meta标签设置视口。在meta标签中，将name属性设为viewport，即可设置视口，示例代码如下。在上述代码中，设置content="width=device-width"表示通知浏览器，布局视口的宽度应该与设备的宽度...
html如何讓div高度等於窗口高度,将div高度设置为窗口高度
weixin_35931648的博客
07-06 650
我正在使用ASP.NET模板并尝试将我的内容设置为占用窗口的整个高度，但我无法实现它。里面有一个容器和两个兄弟姐妹。将底部div设置为高度100％会导致容器溢出。将div高度设置为窗口高度我也使用Bootstrap。我只能将高度百分比降到较低的值，但没有更好的方法吗？ 我添加了一个屏幕截图和小提琴： http://jsfiddle.net/ob1g0752/HTML：testtestfooterC...
css开发技巧(1)_元素的高度与 window 的高度相同/使元素与窗口一样高
qq_26905813的博客
03-06 958
使用 height: 100vh; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html,body{ margin: 0; padding: 0; } .ceshi { width: 100%; height: 100
MFC的窗口与视口
07-09
详细的图示和代码让你明白什么是窗口，什么是视口，以及映射模式的初步知识。
index.html视口试图
04-12
窗口试图
CSS中的position:absolute无父级默认相对于body还是html 引发的一系列思考
weixin_56330639的博客
06-27 561
关于position:absolute 绝对定位元素相对于最近的非 static 祖先元素定位。 当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。-----------------MDN官网 ICB（inital container block, 初始包含块） 关于包含块 什么是包含块：大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。 包含块的确定：确定一个元素的包含块的过程完全依赖于这个元素的 position
CSS Viewport 单位，很多人还不知道使用它来快速布局！
粉丝们务必加入微信粉丝群
07-01 3367
**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScrip...
解决div高度一窗口一样的问题
weixin_38544803的博客
06-02 3751
众所周知，css中width：100%；会使div的宽度与窗口一样大小。然而在div的css中height：100%并不会。 这时只需要把body与html的高度也设置成100%就行了。 html,body{height:100%;overflow:hidden;} 当然前提是这个div的父级是body，如果不是父级也要设置成height：100%
如何设置body高度为浏览器高度
weixin_30595035的博客
04-20 427
html{height:100%} body{min-height:100%} 有时我们的页面上内容不多，但设计师要求背景色必须铺满全屏，这时候只需在样式表中加上这行，body就以浏览器的高度显示，超出浏览器高度也会出现滚动条。 转载于:https://www.cnblogs.com/kevinxue/p/6739465.html...
HTML+CSS基础梳理
MengZD的博客
05-22 767
HTML+CSS基础梳理
使用弹性盒子flex对html进行布局和动态计算视口高度
最新发布
ABC程序人生的专栏
10-07 605
使用弹性盒子flex对html进行布局的一个练习。
D3颜色比例尺d3.schemeCategory10
Rachel_CT的博客
02-10 5966
这里记录一个D3中颜色比例尺对应的颜色（v4/v5）： var color = d3.scaleOrdinal(d3.schemeCategory10); ... return color(i); or var color =d3.schemeCategory10; ... return color[i]; 这里需要注意一下版本问题，v3版本： var color = d3.sc...
div盒子长度与页面一致
09-04
### 回答1： 要使一个 div 盒子的长度与页面一致，可以使用 CSS 中的 height 和 width 属性，分别设置为 100%。代码如下： ```css html, body { height: 100%; } div { height: 100%; width: 100%; } ``` 这里先设置了 html 和 body 标签的高度为 100%，然后在 div 标签中设置了高度和宽度都为 100%。这样就可以使 div 盒子的长度与页面一致了。 ### 回答2： div盒子的长度与页面一致可以通过设置CSS属性来实现。首先，需要将body和html元素的高度设置为100%： ``` body, html { height: 100%; margin: 0; padding: 0; } ``` 然后，将div盒子的高度设置为100%并将宽度设置为auto： ``` div { height: 100%; width: auto; } ``` 这样就可以使div盒子的高度与页面一致。如果div盒子中有内容超出了其高度，则会自动出现滚动条以便查看全部内容。 ### 回答3： 要使一个div盒子的长度与页面一致，我们可以使用CSS样式来实现。 首先，将div盒子的宽度设置为100%。这样它将自动适应父元素的宽度，也就是整个页面的宽度。 然后，将div盒子的高度设置为100vh。vh是相对视口高度的单位，1vh等于视口高度的1%。因此，设置div盒子的高度为100vh将使它的高度与整个视口高度一致。 接下来，我们还可以添加一些其他的样式来美化div盒子，例如设置背景颜色、边框等。 最后，将这些CSS样式应用到div盒子的类或id选择器上，并在HTML文件中使用这个类或id来定义div盒子。 通过以上的步骤，我们可以实现一个长度与页面一致的div盒子。无论屏幕的大小如何变化，div盒子的长度都会自动调整为与页面一致，以适应不同的设备和浏览器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值