CSS高度之间的差异：100％vs高度：自动

167

在一次采访中有人问我“ css height:100%和height:auto？有什么区别？”

有人可以解释吗？

css

— 古西坎
source

236

height: 100% 将元素的高度设为其父容器的100％。

height: auto 表示元素高度将取决于其子元素的高度。

考虑以下示例：

高度：100％

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv 将会有 height: 50px

高度：自动

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv 将会有 height: 10px

— 曼尼斯·米什拉（Manish Mishra）
source

5

我认为在'height：auto #innerDiv的情况下10px + the size it needs for its own content-请参阅此jsfiddle

— BornToCode 2015年

@Manish Mishra：最好的响应式设计是什么？设置子元素或容器元素的高度，然后让另一个元素推导出其高度？

— John Strood

@Djack，这完全取决于您希望在各种屏幕上进行设计的外观，感觉和行为，因此您要编写CSS。没有这样的通用全局规则setting the height of the child element or the container element。只要遵循一定的一致性，避免重复，减少返工，对通用布局进行分组，就可以做任何事情来实现设计。简而言之，您的工作必须有一个系统/模式，以便易于阅读和更改，当然它也可以正常工作

— Manish Mishra

2

我认为思考汽车的一种好方法是，您要“取消”设定高度-就像没有设定它。

— niico

1

我修改了上面BornToCode共享的小提琴，以使其更明显，auto使元素增长以适应其内容以及其子内容。相反，“固定高度”值不会增长（或显示）不适合声明的高度的内容。jsfiddle.net/m3f8y6xr/1我相信，此答案的措词不足以使该元素将包括所有内容（包括其自身的文本或儿童的内容）增长成为不确定。当然，可以说它自己的文本也是孩子。这提供了行为的视觉确认。

— SherylHohman

5

的高度100％大概是浏览器内部窗口的高度，因为那是其父页面的高度。的auto高度将是最小高度的必要遏制。

— 罗希特·阿扎德（Rohit Azad）
source

3

如果父元素是定义的高度不适合浏览器窗口大小的元素，则不一定正确

— -goonerify

1

默认值height: auto在浏览器中，但是height: X%以包含块的百分比定义高度。

— 瓦希德（Vahid Heydarinezhad）
source

0

如果父容器具有指定的height属性，height：100％起作用，否则它将不起作用

— 楚科梅卡
source