我花了 2 天的时间试图解决这个问题,但我不能。我很感激任何帮助。
我有一个容器设置为垂直填充 100%,它做得很好。在容器中,我的标题有另一个 div。在标题下方,我希望另一个 div 也垂直填充 100%(从标题底部到屏幕底部),无论内容有多少。问题是,当我将此 div 的高度设置为 100% 时,它会溢出浏览器窗口的底部,即使其中没有其他内容。只是一个长长的空白。溢出与我的标题大小相同。
如果我删除我的标题,它工作正常。如果我告诉这个 div 不是 100%,那么它只会像内容强制它一样深入,这在某些情况下是不够的。我尝试使用溢出:隐藏,但随后隐藏了我在 div 上的阴影效果。
有问题的代码在这里:
#container {
height: 100%;
position: relative;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-bottom: -80px;
}
#bodybox {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: -80px;
background-color: #FFF;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
}
Run Code Online (Sandbox Code Playgroud)
你会注意到我的页脚悬停在底部。那是因为溢出。我正在使用这个粘性页脚解决方案,以防万一这很重要。
我是 CSS 的新手,我真的很想避免过度使用 Photoshop 或表格,但我似乎无法得到任何解决此问题的提示或建议。请帮忙。谢谢。