Question

我想实现填充整个高度的浮动div，这些div正在另一个div中托管。（我已将DOC-Type设置为＆lt;！doctype html＆gt; for HTML5）

div确实以我想要的方式流动，但出于某种原因，我不能“拉伸”它们来覆盖它们嵌套的整个div。

以下是HTML代码：

<div id="page">
    <div class="leftNavigation">
        LEFT
        <ul>
            <li class="active"><a href="#">2014</a></li>
            <li><a href="#">2013</a></li>
            <li><a href="#">2012</a></li>
            <li><a href="#">2011</a></li>
            <li><a href="#">2010</a></li>

        </ul>
    </div>
    <div class="rightNavigation">
    RIGHT
        <ul>
            <li class="active"><a href="#">2014</a></li>
            <li><a href="#">Some other link</a></li>                
        </ul>
    </div>
    <div class="myContent">
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />       
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
    </div>        
</div>

到目前为止CSS还很小：

    html, body
    {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }             
    div#page
    {
        min-height: 100%;
        position: relative;
        background: #F66;
        width: 90%;
        left: 5%;

    }
    .leftNavigation
    {
        float: left;
        left: 0;
        width: 70px;
        background-color: #9999ff;
        width: 70px;
        min-height: 100%;
    }
    .rightNavigation
    {
        float: right;
        right: 0;
        width: 70px;
        background-color: #00FFFF;
        width: 70px;
        padding-bottom: 0px;            
        height:100%;
    }                
    .myContent
    {

        height:100%;
        left: 0;
        right: 0;
        background-color: #999966;
        margin: 0;
        margin-left: 70px;
        margin-right: 70px;
    }                        
    ul
    {
        padding: 0;
        margin: 0;
    }
    ul li
    {
        list-style: none;
    }

我结束了这样的情况，红色区域仍然可见，我无法弄清楚问题，如何“拉伸”div： Red Area should never be visible, even when there's a scrollbar

我也将代码上传到JSFiddle： http://jsfiddle.net/3wvy2/

我已尝试过几种选项，例如身高：100％，最小身高：100％用于“页面”内的div。我google了很多次，大多数时候我发现了“清楚：两个”的解决方法，这就像是要避免，但它无论如何都无法正常工作。任何想法？

Answer 1

我用你的代码玩了一下并修复了它。现在它正常工作：

div#page
{
    height: 100%;
    position: relative;
    background: #F66;
    width: 90%;
    left: 5%;

删除min- from div＃页面。结果代码应为：

html, body
    {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;            
    }


    div#page
    {
        height: 100%;
        position: relative;
        background: #F66;
        width: 90%;
        left: 5%;

    }

    .leftNavigation
    {
        float: left;
        left: 0;
        width: 70px;
        background-color: #9999ff;
        width: 70px;
        min-height: 100%;
    }


    .rightNavigation
    {
        float: right;
        right: 0;
        width: 70px;
        background-color: #00FFFF;
        width: 70px;
        padding-bottom: 0px;            
        height:100%;
    }


    .myContent
    {

        height:100%;
        left: 0;
        right: 0;
        background-color: #999966;
        margin: 0;
        margin-left: 70px;
        margin-right: 70px;
    }


    ul
    {
        padding: 0;
        margin: 0;
    }
    ul li
    {
        list-style: none;
    }

Answer 2

 html, body
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;            
}


div#page
{
    background: #F66;
    width: 90%;
    left: 5%;
    position: relative;
}

.leftNavigation
{
    float: left;
    left: 0;
    width: 70px;
    background-color: #9999ff;
    width: 70px;
    height: 100%;
    position: absolute;
}


.rightNavigation
{
    float: right;
    right: 0;
    width: 70px;
    background-color: #00FFFF;
    width: 70px;
    padding-bottom: 0px;  
    height: 100%;
    position: absolute;
}


.myContent
{

    height:100%;
    left: 0;
    right: 0;
    background-color: #999966;
    margin: 0;
    margin-left: 70px;
    margin-right: 70px;
}


ul
{
    padding: 0;
    margin: 0;
}
ul li
{
    list-style: none;
}

使用它，它会按你想要的那样工作:) 小提琴：http://jsfiddle.net/3wvy2/14/

HTML5浮动div-layout min-height：100％

2 个答案: