0

我想知道子 div 如何占据父 div 的高度。

下面的代码是我的html：

<div class="container">
        <div class="header width100p">
            <h2>
                Header
            </h2>
        </div>
        <div class="content width100p">
            <div class="width29p npv">
                <div class="width100p inner">

                        <p>
                            navigation
                        </p>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                        </p>

                </div>

            </div>
            <div class="rtb">
                <div class="width100p ql">
                    <p>
                        div one
                    </p>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                    </p>
                </div>
                <div class="width100p mtbs">
                    <p>
                        div two
                    </p>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                    </p>
                </div>
                <div class="floatL width100p widdiv">
                    <div class="floatL width100p">
                        <div class="floatL width40p incont">
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                        </div>
                        <div class="floatL width40p incont">
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                        </div>
                    </div>
                    <div class="floatL width100p">
                        <div class="floatL width40p incont">
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                        </div>

                        <div class="floatL width40p incont">
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                            <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the     industry's standard dummy text ever since the 1500s
                            </p>
                        </div>

                    </div>
                </div>
                <div class="clear"></div>
            </div>


        </div>
        <div class="footer width100p">
            <h2>
                Footer
            </h2>
        </div>

    </div>

各自的风格是：

<style>
        *,html{
            margin: 0;
            padding: 0;
        }
        html{
            height: 100%;
        }
        .container{
            width:960px;
            margin:20px auto;
        }
        .header h2,.footer h2{
            text-align: center;
        }
        .floatL{
            float: left;
        }
        .floatR{
            float: right;
        }
        .clear{
            clear:both;
        }
        .width100p{
            width: 100%;
        }
        .width29p{
            width: 29%;
        }
        .width70p{
            width: 70.8%;

        }
        .header,.footer,.content{
            border:1px solid #000;
        }
        .npv{
            border-right: 1px solid #000;


        }
        .ql,.mtbs{
            border-bottom: 1px solid #000;
        }
        .content{
            display: table;


        }
        .npv, .rtb{
            display: table-cell; 



        }
        .width40p{
            width: 40%;
        }

        .incont{
            margin: 4%;
            background: #ccc;
            border:1px solid red;

        }

    </style>

我想知道（.inner）子div如何占据其父div（.npv）的高度。我尝试将 height:100% !important 应用于 .inner 和 .npv 但仍然无法解决子 div 占据父 div 高度的问题。占用问题

4

3 回答 3

1

标记

<html>
  <body>
    <div class="outer">
      <div class="inner">
    </div>
  </body>
</html>

css

html, body {
  height: 100%;
width: 100%;
}
    .outer {
       height: 100%; // or set height and width in pixels
       width: 100%;
    }

    .outer .inner {
       height: 100%;
       width: 100%;
    }

为了使百分比高度起作用，

您需要在其层次结构中设置每个父级的高度。

包括html和body标签。

于 2013-10-07T12:18:36.667 回答
0

将高度和宽度设置为 100%：

.width100p{
   height: 100%; // or set height and width in pixels
   width: 100%;
}

.width100p .inner {
   height: 100%;
   width: 100%;
}

或者在您的 html 中指定大小，并将其显示为块：

.width100p {
  display:block;
.width100p .inner {
  display:block;
}
于 2013-10-07T12:50:36.420 回答
0

在“将嵌套（子）div 的高度增加到其父 div 的占用高度”上有一个类似的示例，您可以将其用作参考。

建议：
- 父 div 设置位置：绝对
- 子 div 设置位置：绝对；高度：100%；
或
位置：绝对；顶部：0；底部：0；

于 2017-03-05T16:18:43.100 回答