我的问题是我正在尝试制作一个带有滚动选项的小图片库。如果我为画廊的高度设置一个大小，那么它在更大的显示器上看起来会非常尴尬，并且下面有一堆空间。
我认为更大的问题是我对整个网站做了很多调整只是为了确保页脚有效，我绝对不喜欢它的实现方式，尽管在这个阶段我看不到其他方式。所以现在我想我真的只是想在画廊工作方面得到帮助，但如果有人有任何关于让页脚在未来的网站上工作的建议，我很乐意提出建议。
好的，这是我的 HTML:
<body>
<div id="container">
<div id="content_wrapper">
<div id="header">
</div>
<div id="content">
<div id="gallery">
</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
</div>
</div>
</body>
这是相关的 CSS:
html, body {
height: 100%;
}
img {
padding: 0;
margin: 0;
}
#content {
height: auto;
position: fixed;
width: 100%;
float: left;
overflow: auto;
margin: 0;
display: block;
}
#gallery {
height: 400px;
width: 770px;
background-color: rgba(247,247,247,0.8);
margin: 0.5em auto;
padding: 0.5em 0;
overflow: auto;
}
#gallery img {
width: 150px;
height: 120px;
margin: 0.2em 1em;
border: solid;
border-color: #00F;
border-width: 1px;
}
body {
margin: 0;
padding: 0;
color: #FFF;
background-size: cover;
}
#container {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px 0px 0px; /* was: 0 0 -43 0 */
overflow: fixed;
}
#content_wrapper {
width: 100%;
margin: 0px 0px -41px 0px;
padding-top: 40px;
height: 100%;
overflow: fixed;
}
#header {
background-size: cover;
height: 7em;
box-shadow: 4px 2px 5px #000;
border-top: 2px solid #F8F8F8;
border-bottom: 2px solid #F8F8F8;
}
#footer {
position: relative;
z-index: 10;
height: 4em;
margin-top: -4.07em;
background-color: #FFF;
clear: both;
background-color: #2A64A7;
border-top: 2px solid #F8F8F8;
}
抱歉所有代码，但我有点不知所措。每当我摆弄某些东西时，它就会消失在页脚后面，或者在大屏幕上看起来不太好。我会及时更新我发现的任何信息。
提前感谢您的任何建议。谢谢!
最佳答案
尝试这样的事情:(我稍微改变了你的标记)
标记
<div id="header">
</div>
<div id="container">
<div id="content">
<div id="gallery">
</div>
</div>
</div>
<div id="footer">
</div>
CSS
#container
{
height: 100%;
margin: -7em 0 -4em;
padding: 7em 0 4em;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content {
overflow:auto;
height:100%;
}
#header
{
position: relative;
z-index:1;
background-size: cover;
height: 7em;
box-shadow: 4px 2px 5px #000;
}
#footer
{
position: relative;
z-index: 10;
height: 4em;
background-color: #FFF;
clear: both;
background-color: #2A64A7;
}
关于html - Div 消失在页脚后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17825651/