-1

我有一个示例页面，如下所示

HTML 代码：

   <div class="container">
        <div class="header floatL width100p">
            <h2>
                Header
            </h2>
        </div>
        <div class="content floatL width100p">
            <div class="floatL width29p npv">
                <p>navigation div</p>
            </div>
            <div class="floatL width70p rtb">
                <div class="floatL 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="floatL 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>
                            <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>
            </div>
            <div class="clear"></div>

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

样式是：

       *,html{
            margin: 0;
            padding: 0;
        }
        .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;
        }
        .npv{
            border-right: 1px solid;
            height: 100%;
        }
        .ql,.mtbs{
            border-bottom: 1px solid;
        }
        .width40p{
            width: 40%;
        }

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

        }

我想知道为什么左侧导航 div 没有占据 100% 的高度，正如您通过运行上面的代码所看到的那样。

任何帮助，将不胜感激。迫在眉睫...

4

2 回答 2

1

利用css tables

小提琴

CSS

.content
{
    display: table;
    height: 100%;
}
.npv, .rtb
{
   display: table-cell; 
}
于 2013-09-10T09:27:11.110 回答
1

如果您想了解更多关于问题的信息而不是简单地修复它，这是一篇很好的文章，它解释了问题并为您提供了多种解决方案：流体宽度等高列

于 2013-09-10T11:33:21.877 回答