很简单又很奇怪的vue css；使用min-height就不给我自动识别高度了。

最新推荐文章于 2024-05-17 10:23:27 发布
最新推荐文章于 2024-05-17 10:23:27 发布
阅读量340 收藏 1
点赞数 1
文章标签： vue.js css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74132943/article/details/133819918
版权

在使用vue开发项目的时候；遇到一个很简单的css但是咧又很特别很奇葩吧；
使用min-height就不给我自动识别高度了；以至于无法使用%来占据相关高度；

但是这个%他就是不行啊；解决的方法就是把min-height改成固定式的就可以：改成height

Pilot-HJQ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
min-height:100%；没有效果
wei_dan1129的博客
04-14 2173
父元素设置min-height子元素高度设置100%取不到值，这是因为子元素 div设置 height:100%；只有当父级元素满足min-height:1000px;设置的条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。min-height 是在 height 计算之后再套用的. 解决方法：给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算 .index-wrap{ background: rgba(0, 0, 0, 0.03);
vue2.0使用Sortable.js实现的拖拽功能示例
10-20
在Vue 2.0中，实现拖拽功能可以借助第三方库Sortable.js，它是一个轻量级、高性能且无依赖的JavaScript拖放库。本示例将详细介绍如何在Vue项目中结合Sortable.js和vuedraggable.js来实现拖拽功能。 首先，你需要...
为什么min-height不生效
最新发布
文摘资讯
05-17 68
首先来看一段简单的网页代码，使用min-height控制最小高度为父节点的50%。<div class="container"> <div class="child"></div> </div> <style> .container { min-height: 100px; border...
v-charts图表宽高出现问题 为100px,或者不显示解决方法
bamboozjy的博客
07-29 1864
首先要给组件设置width和height,参考:https://v-charts.js.org/#/props 如果还是不行 可以调用resize方法 <!-- 设置ref属性 --> <ve-map v-else :data="mapData" ref="vuemap" width="100%" height="100%" :legend-visible="false
父元素设置min-height，子元素height 100%失效问题
打工人
11-21 2695
父元素设置min-height，子元素height 100%失效问题
关于min-height等样式的使用
qq_57124507的博客
09-17 760
关于min-height等样式的使用
父元素设置了min-height, 子元素设置height:100%无效
pzy_666的博客
02-21 1605
参考文章 关于父元素设置min-height，子元素设置 height 100% 不生效的问题 css 父元素设置了min-height：100%, 子元素设置height:100%无效
vue+element-ui+axios实现图片上传
10-16
在本文中，我们将深入探讨如何使用Vue.js框架结合Element-UI组件库和axios库来实现一个图片上传功能。Vue.js是一个轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化的能力，使得开发更加高效。Element...
Vue项目自动转换 px 为 rem的实现方法
10-17
接下来，我们将使用`postcss-pxtorem`这个PostCSS插件，它可以在编译时自动将px转换为rem。PostCSS是一个工具，它可以解析CSS，然后应用插件来修改CSS，这使得我们可以轻松地添加新的语法特性或者转换现有CSS。 1. ...
vue-列表下详情的展开与折叠案例
10-15
在Vue开发中，列表下详情的展开与折叠是常见的交互设计，用于优化用户体验，避免一次性加载大量数据导致页面拥挤。这个案例主要展示了如何在Vue中实现这样的功能。以下是对该案例的详细解析： ### 功能描述 1. **...
vue中设置height:100%无效的问题及解决方法
10-18
主要介绍了vue中设置height 100%无效的问题及解决方法，需要的朋友可以参考下
Vue-cli工程与Cesium的整合操作步骤
06-20
Vue-cli 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue 项目，它提供了一套脚手架，简化了项目的初始化工作，包括设置Webpack配置、安装依赖等。Vue-cli 提供了一个灵活的构建系统，方便开发者自定义项目结构和...
前端高度自适应 height和min-height 百分比 不生效原因
热门推荐
qlin_11的博客
08-13 1万+
前端高度自适应 情景 其实前端一般不去管高度，都是设置min-height，用来设置最小高度，其他时候就用理层的div来撑开就好了。但是当屏幕很大的时候，比如笔记本和台式显示屏的问题，在内容比较小的时候那么就撑不开了。 这个时候就需要获取屏幕大小也就是浏览器的大小，这里有两个思路，一个是使用**@screen来写两种样式，**在不同屏幕下有不同的样式。 另外还有一种就是，通过html height...
前端必会的 HTML+CSS 常用技巧 之 解决父元素高度消失或最小高度不能自适应问题
ZhuangWei的博客
04-12 1053
前端必会的 HTML+CSS 常用技巧 之 解决父元素高度消失或最小高度不能自适应问题一、问题阐述  问题 1：高度消失  问题 2：父元素设置了最小高度但不能实现高度自适应二、解决方案  第一个方法  第二个方法  第三个方法 一、问题阐述   问题 1：高度消失     先解释一下什么是高度消失（高度消失也叫高度塌陷）如下图所示：   上图的代码如下： <style> ...
在vue中父元素设置min-heigt，子元素设置height:100%,没法自适应高度///vue中获取动态元素的宽高值
唐都恩了的博客
02-03 1848
<template> <div class="toast" ref="wrapper"> <slot v-if="!enableHtml"></slot> <div v-else v-html="$slots.default"></div> <template v-if="closeButto...
h5踩坑_移动端min-height使用
qq_43260366的博客
11-20 415
原因是因为min-height的百分比是相对于父元素的height来说的，若是父元素没有设置是不起作用的！移动端给元素设置min-height：100%没有作用；
Vue 绑定 style
PJZero
05-12 9194
在Vue项目中，如果懒得写class属性，想直接将属性写在style上（我知道这不是一个好习惯）要怎么操作呢？官方实例<!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div>坑的确，上面那样的写法确实能绑定，可是当属性为min-height<!-- style 绑定 --> <div :style="{ min-height:
day3 vue2 学习笔记 vue组件
weixin_51715424的博客
09-25 595
vue2学习笔记 vue 组件 样式穿透
<el-form-item label="质检备注"> <el-input type="textarea" v-model="dataForm.remark" maxlength="100" placeholder="请输入内容" show-word-limit style="width: 70%;min-height: 132px;" ></el-input> </el-form-item> vue 和 element-ui实现补全修改代码，需求是代码原有基础上 将el-input最低高度为132px,出现框的样式和高度不匹配
05-24
你可以通过给 `el-input` 的外层包裹一个 `div` 元素，并设置该元素的高度为 132px，从而实现 `el-input` 的最低高度为 132px。代码示例如下： ``` <el-form-item label="质检备注"> <div style="height: 132px;">...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值