编辑:我发现出于某种奇怪的原因，我的#content 继承了一个高度属性。我不知道为什么，或者为什么这会覆盖我试图设置的高度。 :/
我对此做了很多研究，但我对 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% 高度，但事实并非如此。 感谢您阅读本文:)
最佳答案
您正在声明 height : auto !important;。 !important 声明优先于其他相同的样式属性。只需删除它:
#content {
height: auto;
height: 100%;
min-height : 100%;
...
}
请注意，您的 #content 元素将是其 #container 父元素的 100% 高度。如果您的 #container 元素本身没有高度，您的 #content 元素也将没有高度。您可能想改用 vh 单元。如果是这种情况，请在此处查看我的其他答案:Make div 100% height of browser window .
关于html - 无论我做什么，我的 div 都不想成为 100% 高度... :/，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26407640/