css - 不同的容器高度

Question

我的网站上有多个页面，放置内容的容器的高度各不相同。我设置了一个最小高度，因为有些页面不是那么大，我不希望它们太短。但现在其他页面也停在那个最小高度。我只希望容器的长度与代码要求的一样长，但最小高度为例如650 像素。这是代码:

#container {  margin: 0 auto;  padding: 0 0 20px 0;  text-align: left;  width: 1024px;  min-height: 650px;  overflow: hidden;  background-color: rgba(255, 255, 255, 0.92);}

因为它在 Joomla 中，我没有所有页面的通用代码，但页面是这样构建的:

<div id="container> <div id="content"> </div></div>

它是用 Joomla 构建的，之前我对 HTML 没有任何问题。它们都链接到“template.css”。

这是网站的链接，也许这会有所帮助:

http://www.joomla.sklebekeaalst.be/kalender

如您所见，压延机被剪短了，需要更长。

Answer 1

问题是你只设置了最小高度而不是高度。如果 min-height 没有设置 height ， height 会计算为 auto 并且可能会开始做一些非常奇怪的事情，这取决于它的包含元素和定位。另外，如果自动高度小于最小高度，最小高度将始终呈现。在元素和包含的 div 上设置高度属性，例如 height: 100% ;，这可能会解决问题。