不管我做什么，我的div都不想成为100％的身高…：/

Question

编辑：我发现由于某种奇怪的原因，我的#content继承了height属性。 我不知道为什么，或者为什么这会覆盖我要设置的高度。 ：/

我对此进行了大量研究，但是对CSS的了解还不够好，因此我似乎无法弄清楚。 我正在为uni项目制作一个小型网站，除一件事情外，其他一切都正常。 内容div只是不想填写我告诉它的高度。

    <body>
    <div id="container">
        <div class="logo"><img src="/Users/sophie/Dropbox/3 Uni/MultiEngI/Aufgabe 1/Acc/ArtArchiveLogo500.png" alt="ArtArchive" /></div>
        <div class="header">ArtArchive</div>
        <div id="nav"><li>
            <ul>
                <a href="#">Upload</a>
            </ul>
            <ul>
                <a href="#">Organize</a>
            </ul>
            <ul>
                <a href="#">Browse</a>
            </ul>
        </li>
        </li></div>
        <div id="content" style="height:100%;">I am empty :(</div>
        <div class="footer">I am empty :(</div>
    </div>  
</body>

这是html部分，而css：

    .header {
    background:#c61350;
    height: 100px;
    line-height: 100px;
    text-align: center;
    padding:10px;
}

    .header {
    border-bottom: 12px solid #cd365b;
    color: white;
    font-size: 36px;
    font-family: 'Lato',arial,sans-serif;
    letter-spacing: 50px;
}

    #content {
    height : auto !important; 
    height : 100%;            
    min-height : 100%; 
    background: #fff;
    width: 60%;
    overflow: auto;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
.footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#5f4e54;
}

具有id内容的div应该是100％的高度，不是。 谢谢您阅读此篇：）

Answer 1

您在声明height : auto !important; 。 !important声明优先于其他相同的样式属性。 只需删除此：

#content {
    height: auto; 
    height: 100%;            
    min-height : 100%; 
    ...
}

请注意，虽然#content元素的高度是其#container父对象的高度的100％。 如果您的#container元素本身没有高度，则您的#content元素也将没有高度。 您可能要改用vh单位。 如果是这种情况，请在此处查看我的其他答案：将div设置为浏览器窗口高度的100％。

不管我做什么，我的div都不想成为100％的身高…：/

问题描述

1 个解决方案

解决方案1
5 2014-10-16 15:02:22

不管我做什么，我的div都不想成为100％的身高…：/

问题描述

1 个解决方案

解决方案1 5 2014-10-16 15:02:22

解决方案1
5 2014-10-16 15:02:22