登录  /  注册
首页 > web前端 > css教程 > 正文

css怎么设置div的高度

王林
发布： 2021-03-10 16:35:18
原创
3755人浏览过

css设置div的高度的方法：首先在div标签中添加style属性；然后在style属性中添加height属性并写明固定的高度即可，如【style="height:300px;"】。

css怎么设置div的高度

本文操作环境：windows10系统、css 3、thinkpad t480电脑。

我们可以利用以下三种方式来实现设置div的高度：

1、style中直接写明固定高度

2、class形式调用

3、自适应高度

第一种方法：固定高度法。

固定高度的写法是在div标签中，加上style属性，并在属性中的height属性中写明固定的高度，如 style="max-width:90%"

b20f85351064e66f2688f633053125f.png

第二种方法：class形式调用。

class形式调用需要在head标签下的style标签中写上css样式，然后在div中以class形式调用即可。

9f14c7ded08db0ad831499438c08ce5.png

（学习视频分享：css视频教程）

第三种方法：自适应高度写法。

所谓自适应高度，即相对于父标签或者父容器的高度，以百分比形式来写，这样会随着父容器的高度变化而自适应变化。

900acb65af9f47c3ff18202f2960d9d.png

自适应方法的一个运行结果，可以看出蓝色虚线框有部分露出来黑色实线框的外部。这是因为两个div的高度之和大于了父容器的高度了。

2f9fe51f0f508572d6d2f4c9a7a3891.png

修改了自适应的高度的比例后，请参看下面的效果图。

在这里，我把高度的相对比例换成了70%。

6b1eef90af627b4527407d2682ad773.png

5551ba5a58652cf8b99ae87249f4a47.png

相关推荐：CSS教程

以上就是css怎么设置div的高度的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css div 高度
来源：php中文网
上一篇：手把手教你如何系统学习CSS 下一篇：15 个优秀的响应式 Web 设计 HTML 和 CSS 框架
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
类标识是不是就是数组的键? 类标识是不是就是数组的键?
齐天大宅来自于2023-10-04 00:37:56
0 0 28
session_variables 表在 performance_schema 中不存在 在将MySQL升级到5.7.8-rc版本并登录服务器后，我遇到了以下错误：表'performance_schema.session_variables'不存在我找不到任何解决方案。...
P粉504920992来自于2023-09-22 13:52:07
0 2 634
Laravel按价格排序，带有特殊价格条件 我有一个带有以下列（价格，特价，是否特价）的表。+-------+------+-----------------+--------------+---------+|id|pri...
P粉030479054来自于2023-09-22 13:06:46
0 1 604
renderHook中waitForNextUpdate的替代方案 我已经更新了Testing-library，但我在这种情况下很难找到waitForNextUpdate的替代方法（在react-testing-libraryv13中不再可用htt...
P粉198670603来自于2023-09-22 11:40:09
0 1 500
为什么我无法在Next JS应用中使用CSS文件？ 我一直在一个使用NextJS进行网站设计的项目中工作，想要使用CSS文件进行组件设计，但为什么我无法在我的组件中导入呢？在NextJS应用中是否可能只能使用模块化的CSS文件？我尝...
P粉904191507来自于2023-09-22 10:58:43
0 1 490
如何将函数传递给动态创建的 href？ 我想把一个函数传递给我的a标签链接的href属性，但无论我尝试什么都不起作用。它要么导致404页面，要么根本无法点击。我做错了什么？这个是不可点击的<body><...
P粉571233520来自于2023-09-22 09:37:55
0 1 597
getFirstHalf函数返回结果时出现问题 正在开发一个函数，该函数接受一个数组并返回该数组的前一半，但在返回之前，它会调用自身，直到数组的长度为1：constgetFirstHalf=function(array){con...
P粉311617763来自于2023-09-22 08:49:09
0 1 336
使用React.StrictMode和fabric.js的Canvas实例进行重渲染 我正在创建一个织物画布和按钮，这些按钮实例化的形状应该是可选择的。我不明白为什么在以下情况下我的组件会被重新渲染两次。因此，我的织物形状无法选择。然而，当我从我的index.tsx...
P粉659378577来自于2023-09-21 23:48:52
0 1 398
PHP存储数据库效率的问题 程序一：for($i=0;$<100;$++){连接数据库；执行select提前一个值；断开数据库连接；连接数据库；执行一次updata 存储数据；断开数据库连接；}程序执行...
八哥来自于2023-09-22 22:46:18
0 0 288
React Native自定义TextInput不响应onChangeText事件 我想在ReactNative中创建和使用一个CustomTextInput。我已经按照下面的代码创建了它，但是CustomTextInput中的onChangeText属性没有正常...
P粉743288436来自于2023-09-21 22:59:27
0 2 285
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 立即咨询

  • 微信沟通

  • QQ群

  • 优惠券

  • 返回顶部