height,min-height与页面布局

最新推荐文章于 2022-12-28 14:28:11 发布

原创最新推荐文章于 2022-12-28 14:28:11 发布 · 992 阅读

1 ·

CC 4.0 BY-SA版权

前端样式专栏收录该内容

1 篇文章

订阅专栏

这篇博客是作者作为前端新人对html高度和页面布局问题的整理，探讨了height和min-height属性在不同场景下的使用，包括：1. height可能导致子元素高度超出；2. min-height下子元素height: 100%无效；3. 如何通过设置让content高度适应html，并实现背景沾满屏幕的效果。内容尚需进一步完善。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一篇博客，哇哈哈哈哈哈！
作为一个前端新人，整理了一些关于html高度和页面布局的问题。
在涉及高度的时候，我目前使用的属性有：height，min-height，以下是整理的几种使用情况：
1、height

        html{
            height:100%;
            width: 100%;
        }
        body{
            height:100%;
            width: 100%;
            margin: 0;
        }
        .content{
            #这是body中子元素的类
            height: 1000px;
            background-color: aqua;
        }

此时，子元素的高度大于html的高度（不适合应用于有左侧导航栏且导航栏有背景色的情况）
2、min-height

        html{
            min-height: 100%;
        }
        body{
            min-height: 100%;
            margin: 0;
        }
        .content{
            height: 1000px;
            background-color: aqua;
        }

此时content中如果设置height：100%是无效的。
3、让content的高度可以完美适应html高度（当content较小时还可以给body设置背景沾满屏幕，content较大时html和body也能随着变大）

  html{
            height: 100%;
            width: 100%;
            display: table;
            background-color: burlywood;
        }
        body{
            height: 100%;
            width: 100%;
            display: table-cell;
        }
        .content{
            #height: 1000px;
            height: 100%;
            background-color: aqua;
        }