欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

css常见问题（1）之全屏高度

程序员文章站 2022-03-13 17:23:24
例如一个页面一个元素需要占百分之百高度或者两个元素需要各占50%高度，直接给元素加上height:100%，在父元素有固定高度情况下可行的。没有父元素也就是说父元素就是body，这时候需要给页面的html以及body设置高度，再给元素设置百分比高度。

例如一个页面一个元素需要占百分之百高度或者两个元素需要各占50%高度，直接给元素加上height:100%，在父元素有固定高度情况下可行的。没有父元素也就是说父元素就是body，这时候需要给页面的html以及body设置高度，再给元素设置百分比高度。

<body>
    <div class="divTest_one">
    </div>
    <div class="divTest_two">
    </div>
</body>
<style>
    html,body{
        height: 100%;
        margin: 0; /* 需要清除body自带的外边距 */
    }
    .divTest_one,.divTest_two{
        width: calc(100% - 2px);
        height: calc(50% - 4px); /* 边框占了4个像素 */
        border: 1px solid red;
    }
</style>

第二种写法可以使用vh（浏览器可视区域及视口的高度，1vh=视口的1%高度）

<body>
    <div class="divTest_one">
    </div>
    <div class="divTest_two">
    </div>
</body>
<style>
    html,body{
        margin: 0; /* 需要清除body自带的外边距 */
    }
    .divTest_one,.divTest_two{
        width: calc(100% - 2px);
        height: calc(50vh - 4px); /* 边框占了4个像素 */
        border: 1px solid red;
    }
</style>

 

本文地址：https://blog.csdn.net/qq_29039105/article/details/107357616

上一篇： 官员士大夫的千年特权是什么？雍正是怎么打破的

下一篇： 按键使数码管循环显示从0到9 (51单片机+汇编语言+Proteus仿真)

推荐阅读