css – 百分比填充定义元素高度时忽略max-height（css高度百分比不生效）

25-02-16 20

最近很多小伙伴都在问css–百分比填充定义元素高度时忽略max-height和css高度百分比不生效这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展"CSSmin-height"的

最近很多小伙伴都在问css – 百分比填充定义元素高度时忽略max-height和css高度百分比不生效这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展"CSS min-height"的中文翻译是"CSS 最小高度"、CSS 100％高度，填充 / 边距 - CSS 100% height with padding/margin、CSS height 与 max-height min-height、CSS height属性设置元素的高度_html/css_WEB-ITnose等相关知识，下面开始了哦！

本文目录一览：

css – 百分比填充定义元素高度时忽略max-height（css高度百分比不生效）
"CSS min-height"的中文翻译是"CSS 最小高度"
CSS 100％高度，填充 / 边距 - CSS 100% height with padding/margin
CSS height 与 max-height min-height
CSS height属性设置元素的高度_html/css_WEB-ITnose

css – 百分比填充定义元素高度时忽略max-height（css高度百分比不生效）

当内部填充大于max-height值时,似乎忽略max-height属性值.例如,在元素上设置此类会导致忽略max-height.

.max-height-ignored {
    height: 0; /* or auto,makes no difference */
    max-height: 40px;
    padding: 0 0 50% 50%;
}

demo here

在我的情况下,包裹元素以防止溢出将是一个痛苦,只是想知道这背后是否有原因不起作用.

解决方法

最小/最大宽度/高度属性永远不会考虑任何其他框尺寸,既不是边框也不是填充.它们仅分别约束宽度和高度属性的使用值. Section 10 of CSS2.1没有在散文中明确提到min / max属性的边框或填充,但它确实引用了width和height属性,两者都引用了内容维度.

如果设置height：50px,则元素仍将被限制为40px的内容高度.然后填充从内容区域延伸.

不幸的是,它出现了盒子大小：border-Box没有完全解决这个问题,至少在边框和/或填充超过宽度和高度时也是如此.

虽然我可以推断这是因为浏览器遵循规范而发生的,为什么规范是以这种方式编写的,我无法客观地回答.鉴于填充和溢出剪辑可以一起工作,我不认为这种行为的原因与溢出有关.

"CSS min-height"的中文翻译是"CSS 最小高度"

min-height属性用于设置一个盒子的最小高度。min-height属性的值可以是一个数字、一个长度或一个百分比。

例子

<html>
   <head>
   </head>
   <body>
      <p>
         This paragraph is 400px wide and min height is 150px
         This paragraph is 400px wide and min height is 150px
         This paragraph is 400px wide and min height is 150px
         This paragraph is 400px wide and min height is 150px
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "100" height = "100" />
   </body>
</html>

登录后复制

以上就是"CSS min-height"的中文翻译是"CSS 最小高度"的详细内容，更多请关注php中文网其它相关文章！

CSS 100％高度，填充 / 边距 - CSS 100% height with padding/margin

问题：

This has been driving me crazy for a couple of days now, but in reality it''s a problem that I''ve hit off and on for the last few years: With HTML/CSS how can I make an element that has a width and/or height that is 100% of it''s parent element and still has proper padding or margins? 这让我疯狂了好几天了，但实际上这是我在过去几年中一直存在的问题：使用 HTML / CSS 我怎样才能制作出具有宽度和 / 或宽度的元素高度是它的父元素的 100％，仍然有适当的填充或边距？

By "proper" I mean that if my parent element is 200px tall and I specify height = 100% with padding = 5px I would expect that I should get a 190px high element with border = 5px on all sides, nicely centered in the parent element. 通过 “正确” 我的意思是，如果我的父元素是 200px 高，我指定 height = 100% ， padding = 5px 我希望我应该获得一个 190px 高元素， border = 5px 的所有边，很好地居中在父元素。

Now, I know that that''s not how the standard box model specifies it should work (although I''d like to know why, exactly...), so the obvious answer doesn''t work: 现在，我知道那不是标准盒子模型指定它应该如何工作（虽然我想知道为什么，确切地说......），所以明显的答案不起作用：

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

But it would seem to me that there must be SOME way of reliably producing this effect for a parent of arbitrary size. 但在我看来，必须有一些方法可以为任意大小的父母可靠地产生这种效果。 Does anyone know of a way of accomplishing this (seemingly simple) task? 有谁知道完成这个（看似简单）任务的方法？

Oh, and for the record I''m not terribly interested in IE compatibility so that should (hopefully) make things a bit easier. 哦，为了记录，我对 IE 兼容性并不十分感兴趣，所以应该（希望）让事情变得更容易一些。

EDIT: Since an example was asked for, here''s the simplest one I can think of: 编辑：自从一个例子被要求，这是我能想到的最简单的一个：

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

The challenge is then to get the black box to show up with a 25 pixel padding on all edges without the page growing big enough to require scrollbars. 接下来的挑战是让黑盒子在所有边缘都显示 25 像素的填充，而页面不会变得足够大以至于需要滚动条。

解决方案：

参考一： https://stackoom.com/question/22Nv/CSS - 高度 - 填充 - 边距
参考二： https://oldbug.net/q/22Nv/CSS-100-height-with-padding-margin

CSS height 与 max-height min-height

[height]

解释： 属性设置元素的高度。

支持： 所有主流浏览器都支持 max-height 属性。

说明： 这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。

注释：行内非替换元素会忽略这个属性。

[max-height]

解释： 属性设置元素的最大高度。

支持： 所有主流浏览器都支持 max-height 属性。

说明： 元素可以比指定值矮，但不能比其高。不允许指定负值。

注释：max-height 属性不包括外边距、边框和内边距

[max-height]

解释： 属性设置元素的最小高度。

支持： 所有主流浏览器都支持 max-height 属性。

说明： 素可以比指定值高，但不能比其矮。不允许指定负值。

【example】

 1 #box {
 2     width: 100px;
 3     height: 100px;
 4     border: 1px solid red;
 5 }
 6 #test {
 7     width: 100%;
 8     max-height: 100%;
 9     background-color: blue;
10     /* height: 100%; */
11 }

#box {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
#test {
    width: 100%;
    max-height: 100%;
    background-color: blue;
    height: 100%;
}

CSS height属性设置元素的高度_html/css_WEB-ITnose

height属性设置元素的高度。注意： height属性不包括填充，边框，或页边距！本文章向码农介绍css 高度height 的使用方法和基本实例，需要的css码农可以参考一下。

css height高度简介

这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX，em等常用使用PX（像素）为html单位。

一、height高度语法

1、高度基本语法

Height:auto 设置高度自动

立即学习“前端免费学习笔记（深入）”；

（通常默认高度是auto自动，自适用内容而增高，通常如果想高度自适应不用设置）

Height:20px 设置高度为固定数值

2、CSS高度用法结构

#box{height:50px}

设置了box对象盒子高度为50px（像素）

扩展阅读：CSS行高line-height

说明：“#box”为CSS选择器，花括号内表示对象CSS样式。

二、高度样式用法

Height:50px 设置对象高度为50px

Height:50em 设置对象高度为50相对长度em

通常单独对一个div高度为百分比没有效果

扩展阅读：html em标签

CSS自适应高度

一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即可实现此效果。同时也无需使用height:auto来实现高度自适应。通常默认情况下不用再设置高度值为auto，对象高度即是自适应高度。

常用px（像素）作为单位

三、html标签内原始高度height元素设置

1）、设置table表格高度：

内容
2）、设置img图片高度height： CSS height属性设置元素的高度_html/css_WEB-ITnose

当图片设置高度后，如果宽度没有设置，图片将自动根据设置高度等比例缩小或放大显示图片(扩展阅读：css img)

以上高度height的数值都没有单位，也不需要添加单位，添加单位反而错误，默认以px像素为长度单位。

Html原始高度属性与CSS高度对照

以前html直接设置高度 width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。

table tr td表格高度样式设置实例html代码：

<table>     <tr>         <td height="100">我的高度为100px</td>     </tr>     <tr>         <td height="50">我高度为50px</td>     </tr> </table>

登录后复制

分别设置了高度为100px和50px的两行表格

四、css高度height应用案例

我们设置一个命名为box的盒子，设置一个高度为200px盒子，为了直观观看高度设置效果，我们再对此盒子添加1像素红色边框,如果不设置宽度，将全屏100%宽度，所以我们再设置一个css宽度width为80px属性。

1、高度案例CSS代码：

#box{height:200px;border:1px solid #F00;width:80px}

登录后复制

/* CSS注释说明：设置了红色css边框、高度200px、宽度为80px */

2、高度案例HTml源代码片段：

<div id="box">我高度为200px</div>

登录后复制

五、css高度height总结

通常使用css高度对对象设置高度长度单位。一般我们需要对盒子对象设置高度时候，只需要对该CSS类添加高度height加值即可。高度不能设置百分比高度如“height:50%”,设置百分比的高度无效。这篇教程讲解CSS height与html height区别及用法，希望大家能掌握高度样式属性的设置及用法。

css相关阅读教程：

CSS 教程

CSS 简介

CSS 语法

CSS Id 和 Class选择器

CSS 样式的创建

CSS background 背景介绍

CSS 文本样式

CSS font 字体

CSS A 链接

CSS ul ol列表样式

CSS TABLE 样式

CSS 框模型

CSS border 边框

CSS Outlines 轮廓

CSS 外边距 Margin

CSS Padding 内边距

CSS 分组和嵌套选择器

CSS 尺寸 (Dimension)

CSS Display 属性

CSS Position 定位

CSS Float 浮动

CSS 水平对齐(Horizontal Align)

CSS 组合选择符

CSS 伪类

CSS 伪元素

CSS 导航栏

CSS 下拉菜单

CSS 图片廊

CSS 图像透明/不透明

CSS sprite 图像拼合技术

CSS 媒体类型

CSS 属性选择器

CSS 实例

关于css – 百分比填充定义元素高度时忽略max-height和css高度百分比不生效的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于"CSS min-height"的中文翻译是"CSS 最小高度"、CSS 100％高度，填充 / 边距 - CSS 100% height with padding/margin、CSS height 与 max-height min-height、CSS height属性设置元素的高度_html/css_WEB-ITnose的相关知识，请在本站寻找。

本文标签：