即使没有内容,如何强制DIV块扩展到页面底部？

Jason Hernan.. 109

你的问题不是div不是100%的高度,而是它周围的容器不是.这对我怀疑你正在使用的浏览器有帮助:

html,body { height:100%; }

您可能还需要调整填充和边距,但这将使您获得90%的路径.如果您需要使其适用于所有浏览器,您将不得不使用它.

这个网站有一些很好的例子:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

我还建议你去http://quirksmode.org/

你的问题不是div不是100%的高度,而是它周围的容器不是.这对我怀疑你正在使用的浏览器有帮助:

html,body { height:100%; }

您可能还需要调整填充和边距,但这将使您获得90%的路径.如果您需要使其适用于所有浏览器,您将不得不使用它.

这个网站有一些很好的例子:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

我还建议你去http://quirksmode.org/

我将尝试直接在标题中回答这个问题,而不是一直坚持将页脚粘贴在页面底部.

如果内容不足以填充可用的垂直浏览器视口,则将div扩展到页面底部:

演示(拖动框架手柄以查看效果):http://jsfiddle.net/NN7ky
(上行:干净,简单.缺点:需要flexbox - http://caniuse.com/flexbox)

HTML:

  

    div1

    div1

    div1

  

  

    div2

    div2

    div2

  

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - 或者我太困了

尝试使用以下css规则:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

stuff