CSS - height:calc(100% - Nem)在flex中不起作用
CSS - height:calc(100% - Nem)在flex中不起作用是因为在flex布局中，元素的高度由flex容器的属性和子元素的属性共同决定。使用calc()函数计算高度时，需要注意以下几点：
- flex容器的属性：flex容器的属性包括flex-direction、justify-content、align-items等，这些属性会影响子元素的布局和尺寸。如果flex容器的属性与calc()函数计算的高度冲突，可能会导致calc()函数不起作用。
- 子元素的属性：子元素的属性包括flex-grow、flex-shrink、flex-basis等，这些属性会影响子元素的尺寸。如果子元素的属性与calc()函数计算的高度冲突，可能会导致calc()函数不起作用。
- 其他因素：除了flex容器和子元素的属性外，还有其他因素可能影响calc()函数的计算结果，例如父元素的高度、浏览器的兼容性等。
解决这个问题的方法有以下几种：
- 调整flex容器的属性：根据具体情况，调整flex容器的属性，使其与calc()函数计算的高度兼容。例如，可以尝试修改flex-direction、justify-content、align-items等属性，或者使用其他布局方式替代flex布局。
- 调整子元素的属性：根据具体情况，调整子元素的属性，使其与calc()函数计算的高度兼容。例如，可以尝试修改flex-grow、flex-shrink、flex-basis等属性，或者使用其他方式设置子元素的高度。
- 使用其他方式计算高度：如果calc()函数在flex布局中无法正常工作，可以尝试使用其他方式计算高度。例如，可以使用JavaScript动态计算高度，或者使用其他CSS属性和单位设置高度。
需要注意的是，以上解决方法仅供参考，具体应根据实际情况进行调整。另外，腾讯云提供了一系列云计算相关产品，可以根据具体需求选择适合的产品。具体产品介绍和链接地址请参考腾讯云官方网站。
相关·内容
1回答
CSS - height:calc(100% - Nem)在flex中不起作用
html、css、flexbox
这三行的高度加在一起是100%，并且必须始终在页面上可见，无需滚动。在流体行中，我有一个模块，它必须占据100%的高度。此外，在模块中，我需要使用overflow:auto。这是我的代码： * { } height: 100%; margin:0;
浏览 13提问于2018-03-05得票数 0
回答已采纳
2回答
我如何为我的页面提供一个div，它不仅显示背景图像，而且填充页面的其余部分？
javascript、html、css
我没有看到图像，所以我不能100%确定它是否填满了页面。有人看到我的错误了吗？css min-height: 100%; height: 100%; <link rel="stylesheet" type="text/css
浏览 0提问于2020-05-02得票数 0
2回答
带有方格的垂直CSS柔性盒
html、css、responsive-design、flexbox
我试图实现一个响应的布局与：-一个固定的标题宽度100%和高度为50 px-3相等的平方在右边，接管整个空间从顶部到底部的页面。-- wrapper -->body { width: 100%; padding: 0px; width: 100%;
浏览 6提问于2014-02-18得票数 1
回答已采纳
5回答
<div id="wrapper" style="width:90%;height:100px;background-color:Gray;"> <div id="two" style="
浏览 0提问于2011-03-18得票数 52
回答已采纳
3回答
CSS溢出:自动超出div边界
css、html、size、overflow
我在合并div框和overflow: auto属性时遇到了问题，如果需要的话可以添加滚动条。问题是我不希望整个页面是可滚动的，而只是内容div，因此我在正文中添加了overflow:隐藏，在内容中添加了overflow: auto。margin: 0; overflow: hidden; /** no scrollbar on whole page **/}
{
浏览 5提问于2014-03-12得票数 1
4回答
在对象文本中添加字符串的方法
javascript、string、reactjs
我可以在对象文本中做一些字符串添加吗？ flexWrap: 'wrap', padding: 10,
height: 'calc
浏览 10提问于2016-07-09得票数 1
回答已采纳
1回答
我能用sass简化这个css吗？
html、css、layout、sass
needed" or "Ram" for IE 11 but items are being stretched when they should not body { height{ flex-wrap: wrap; box-sizing: border-box;}
.item {
浏览 14提问于2020-09-23得票数 0
回答已采纳
3回答
动态高程设定
html、css
<body> <main height="rest of the height of viewport"></main>
浏览 1提问于2016-08-25得票数 0
回答已采纳
4回答
overflow-y:滚动或自动不能正常工作。它不是滚动
javascript、html、css、vue.js、less
chats, index) in messages[currentRoom]" /> </div>.chatarea { height: 100
浏览 97提问于2021-08-18得票数 0
3回答
未定义的ReferenceError: maxHeight未定义
javascript、jquery、html、css、function
jQuery var maxH = 0; $(".left, .middle, .right").each(function() { $(".left, .right").css('justify-content'
浏览 0提问于2019-04-16得票数 0
回答已采纳
3回答
我试图应用在底部的弹出窗口的空间，使用下面的css和html代码，因为我只有mozilla浏览器的问题，我没有在弹出的末尾的空间，up.Below是我的代码，我已经使用，但我需要减少更多的空间，我在铬浏览器<style type="text/css"> .bottom { width: 100</e
浏览 0提问于2019-05-08得票数 1
1回答
一致的全高度垂直尺寸与引导带3布局？
html、twitter-bootstrap、css
我得到了一个相当简单的基于Bootstrap 3的布局，其中我希望主元素(一个中央div)在调整浏览器窗口的大小时垂直扩展或收缩以填充可用的空间，但允许在此下面的几个元素，这样所有元素的高度都不会溢出窗口高度问题是，根据垂直窗口大小，".90-height“类(height: 90%)要么导致所有元素的总高度略过小，要么导致略微过高。CSS：.90-height { he
浏览 0提问于2017-05-13得票数 1
回答已采纳
1回答
在较宽的屏幕上水平地堆放柱子，在较小的屏幕上垂直地堆放柱
html、twitter-bootstrap、css、flexbox
每个都是(100% -40 is )高。
我找不到六号了。我试过min-width了。我还尝试将整个过程“移植”到引导(我已经在页面上使用了引导元素)，但这与一些角组件(需要轮询父组件的大小；由于某种原因，元素会不断增长)不太好地工作。
如果有好主意我会很感激的！
浏览 1提问于2016-02-18得票数 2
回答已采纳
7回答
使用Twitter Bootstrap将页脚粘贴到页面底部
css、twitter-bootstrap
#holder { position:relative;然后使用下面的CSS作为我的页脚 margin-top: 10px;: center; color: #333;}
bottom: -50px;
height
浏览 1提问于2012-07-19得票数 78
回答已采纳
3回答
当内容改变高度时，如何将我的页脚保存在我的内容下面？
html、css
在我的项目中，我有很多路径，每个路径都有不同的页面高度。我试图把我的页脚放在页面的底部，当内容不符合视窗或当它符合。但是，在一些内容不多的页面上，仍然需要滚动才能看到页脚。如何动态地将页脚放在内容的底部？script><footer class="footer"> <p>footer goes here</p>
</foot
浏览 6提问于2022-08-23得票数 1
1回答
具有calc最大高度的IE和CSS挠性盒存在窗口调整问题。
css、internet-explorer、flexbox
我有一个项目的用例，其中有一个使用css calc来确定其位置的模式。JsFiddle： position: relative; display: -ms-flexbox; max-width: calc(100% - 2.286rem * 2);在Chro
浏览 2提问于2017-05-19得票数 1
1回答
具有基于容器的特定宽度和高度的Div
javascript、html、css
我有两个日历并排，一切都看起来很好使用css网格。: grid; grid-column-gap: 10px; grid-template-columns; display: flex; justify-content: center;
align-itemsheight<
浏览 12提问于2020-03-27得票数 0
3回答
CSS高度: 100%不在html或body中工作。
css、twitter-bootstrap、flexbox
我正在努力使页面中的一些内容填满所有剩余的屏幕大小。我的页面有一个标题，内容是两个div，都需要可滚动。我尝试了一些解决方案，我想出的最好方法是使用和CSS calc来设置高度。我还使用了引导程序，并使用了box-sizing修复程序来解决我在引导过程中遇到的一些问题，这也可能是一个问题。我的柔性盒CSS：body { /* setting height: 100</
浏览 6提问于2015-06-13得票数 4
回答已采纳
2回答
SASS使用屏幕高度计算设置高度差后的剩余vh
html、css、sass
所以我在我的页面上有一个div，不管设备大小如何都是209.53px。我想有一个计算，可以计算出这覆盖了屏幕的百分比。这样，我就可以设置一个地图/图像来填充屏幕的其余部分。我尝试过使用height 80% ect，但是我就是做不到，在SASS/SCSS中有什么方法可以做到这一点吗？所以我会说： 209.53/(SCREEN HEIGHT IN PIXELS) = PERCENTAGE COVERED
100 - PERCENTAGE COVERED = REMAINING V
浏览 211提问于2019-06-21得票数 1
回答已采纳
2回答
为什么红色部分不占可用高度的100%
html、css、height
为什么红色部分不占用100%的高度，我的意思是为什么红色部分占100‘t的100%，而不是100’t 10‘t 40’t(黑色和蓝色的高度)。 height: 10px;}
height: 100%;}
height: 40px;
background-color: blue;
浏览 9提问于2022-07-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
