html - 为没有高度的父元素计算高度时使用百分号

标签 html css

我不想显式设置 body 的高度并以百分比设置子 div 的高度。

<!doctype html>
<html>
<body>
    <div style="height:10%">
        fdjfdkjl
    </div>
    <div style="height:90%">
        dsds
    </div>
</body>
</html>

但是,这是行不通的。为什么?在规范中有行为描述:

When the percent notation is used height of the element is calculated relatively to height of the parent. If the parent is doesn't set explicitely the browser's window is used.

好的,我可以将 body 设置为 100%,但这也不起作用:它的高度只是包裹了内容。为什么没有使用浏览器的窗口?

最佳答案

正如@MattK 所说,

html, body { height: 100%; }

解决问题。我认为这种方法行之有效,因为 divbody 的父级已定义大小。 html 没有父级,使用了窗口的 height

关于html - 为没有高度的父元素计算高度时使用百分号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12321773/

相关文章:

javascript - django 模板无法调用 javascript

css - 如果 div 的高度不适合打印媒体,是否插入分页符?

javascript - 将社交媒体网络共享按钮集成到 Highcharts。

jquery - 数据表模态详情展示

html - CSS Onmouseexit 淡出

html - 添加条纹文本阴影和描边

Javascript/jQuery - 将 CSS 样式应用于类元素

javascript - 通过 Javascript 显示的 HTML 按钮不起作用

javascript - 如何在从 AJAX 请求接收到的当前文档中应用 CSS 样式?

html - 使用 rgba 作为背景图像