00-设置height:100%?

92 阅读1分钟

问题1

为何父级元素没有具体高度值的时候,子元素设置height:100%会无效?

答案

规范给出的解释是如果包含块的高度没有显示的指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为`auto`,”auto“ * 100% = NAN

问题2

如何让元素支持height:100%效果?

答案

1.设置显示的高度:
html,body {
height: 100%;
}

2. 使用绝对定位:
div {
height: 100%;
position: absolute;
}
* 绝对定位的高度百分比会把在最近的一个具有相对定位的祖先元素包括其padding大小值计算在内,得到一个高度值

问题3

DOM的api中的高度都有哪些?

答案

// 1. 元素偏移尺寸
offsetWidth = contentWidth + padding + border
offsetHeight = contentHeight + padding + border

// 2. 元素可视尺寸
clienttWidth = contentWidth + padding
clientHeight = contentHeight + padding

问题4

css中如何理解充分利用可用空间?

答案

目的是让页面元素能够自适应地填充或分配父容器提供的空间,无论是在响应式设计中还是在固定布局场景下
只要元素的尺寸表现符合"充分利用可用空间",无论是垂直方向还是水平方向,都可以通过margin改变尺寸