Question

我的#main div尽管有内容，但却没有height或width。我希望#main div填充header和footer之间100％的空间，以便显示background-image的{{1}}整个页面（少于#main和header）。我无法让footer动态填充整个空间（它应该在调整浏览器窗口时调整大小）...我该怎么做？

HTML：

#main

CSS：

<body>
  <div id="page">
    <header id="header">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
    </header>

    <content id="main">
        <h1>Body</h1>
        <p>Text...</p>
    </content>

    <footer id="footer">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </footer>
</div>
</body>

Answer 1

<content id="main"> is not a valid HTML tag，you can define it as a block-level element via CSS anyway。

我建议您改为阅读

<div id="main">
    ...
</div>

Answer 2

将此添加到您的CSS ...

html, body { height: 100% }

......事情应该有效。

请参阅http://codepen.io/zitrusfrisch/pen/hDHrm

而且，是的，您应该修复HTML，因为<content>不是有效的元素。请参阅笔以获得有效的解决方案。

Answer 3

而不是使用此代码：

#main {
    padding-bottom: 50px;
    background: url('Background.jpg');
}

在body

上使用此功能

body {
    background: url('Background.jpg');
}
#main {
    padding-bottom: 50px;
}

内部div具有0x0大小，即使它具有内容

3 个答案: