咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 841|回复: 0

[CSS] CSS子元素跟父元素的高度一致的实现方法

[复制链接]
  • TA的每日心情
    无聊
    2019-6-2 14:11
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-10-5 09:42:01 | 显示全部楼层 |阅读模式
    绝对定位方法:
    (1)将父元素设置为相对定位,不写父元素的高度时,会随着左边的子元素高度变化而变化
    1. .parent {
    2.         /*关键代码*/
    3.         position: relative;
    4.         /*其他样式*/
    5.         width: 800px;
    6.         color: #fff;
    7.         font-family: "Microsoft Yahei";
    8.         text-align: center;
    9. }
    复制代码
    (2)左边一个元素有个最小高度的情况
    1. .left {
    2.         min-height: 700px;
    3.         width: 600px;
    4. }
    复制代码
    (3)右边元素要想跟父元素的高度是一致,那么可以用绝对定位这样设置,如果不想同时写top和bottom,写一个时,再写上height:100%,也可以达到一样的效果
    1. .right {
    2.         /*关键代码*/
    3.         width: 200px;
    4.         position: absolute;
    5.         top: 0;
    6.         right: 0;
    7.         bottom: 0;
    8.         /*其他样式*/
    9.         background: #ccc;
    10. }
    复制代码
    (4)完整例子代码:
    1. <!DOCTYPE html>
    2. <html >
    3. <head>
    4.         <meta charset="UTF-8">
    5.         <title>子元素高度与父元素一致</title>
    6.         <style>
    7.                 .parent{
    8.                         position: relative;
    9.                         background: #f89;
    10.                         width: 800px;
    11.                         color: #fff;
    12.                         font-family: "Microsoft Yahei";
    13.                         text-align: center;
    14.                 }
    15.                 .left {
    16.                         min-height: 700px;
    17.                         width: 600px;
    18.                 }
    19.                 .right {
    20.                         width: 200px;
    21.                         position: absolute;
    22.                         top: 0;
    23.                         right: 0;
    24.                         bottom: 0;
    25.                         background: #ccc;
    26.                 }
    27.         </style>
    28. </head>
    29. <body>
    30.         <div class="parent">
    31.                 <div class="left">
    32.                         左侧 left 不定高,parent的高度随着左侧left 的高度变化而变化,右侧也跟着变
    33.                 </div>
    34.                 <div class="right">
    35.                         这边的高度跟父元素高度一致
    36.                 </div>
    37.         </div>
    38. </body>
    39. </html>
    复制代码
    (5)效果
    CSS子元素跟父元素的高度一致的实现方法-1.png

    (6)问题来了:

    如果右侧的子元素高度超出了.parent,怎么办?
    1. .right-inner {
    2.         background: limegreen;
    3.         height: 1024px;
    4. }
    复制代码
    1. <div class="right">
    2.         <div class="right-inner">right的子元素,高度为1024px,会撑破容器,给.right加上 overflow:auto 就防止溢出了</div>
    3. </div>
    复制代码
    效果图如下:
    CSS子元素跟父元素的高度一致的实现方法-2.png

    完整代码:
    1. <!DOCTYPE html>
    2. <html >
    3. <head>
    4.         <meta charset="UTF-8">
    5.         <title>子元素高度与父元素一致</title>
    6.         <style>
    7.                 .parent{
    8.                         position: relative;
    9.                         background: #f89;
    10.                         width: 800px;
    11.                         color: #fff;
    12.                         font-family: "Microsoft Yahei";
    13.                         text-align: center;
    14.                 }
    15.                 .left {
    16.                         min-height: 700px;
    17.                         width: 600px;
    18.                 }
    19.                 .right {
    20.                         width: 200px;
    21.                         position: absolute;
    22.                         top: 0;
    23.                         right: 0;
    24.                         height: 100%;
    25.                         overflow: auto;
    26.                         background: #ccc;
    27.                 }
    28.                 .right-inner {
    29.                         background: limegreen;
    30.                         height: 1024px;
    31.                 }
    32.         </style>
    33. </head>
    34. <body>
    35.         <div class="parent">
    36.                 <div class="left">
    37.                         左侧 left 不定高,parent的高度随着左侧left 的高度变化而变化,右侧也跟着变
    38.                 </div>
    39.                 <div class="right">
    40.                         <div class="right-inner">right的子元素,高度为1024px,会撑破容器,给.right加上 overflow:auto 就防止溢出了</div>
    41.                 </div>
    42.         </div>
    43. </body>
    44. </html>
    复制代码
    (7)其他资源
    http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent
    到此这篇关于CSS子元素跟父元素的高度一致的实现方法的文章就介绍到这了,更多相关CSS子元素父元素高度内容请搜索咔叽论坛以前的文章或继续浏览下面的相关文章,希望大家以后多多支持咔叽论坛!

    原文地址:https://www.jb51.net/css/743410.html

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 13:22

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表