1

我#main div没有height或width尽管有内容。我希望#main div填充 100% 和之间的空间，header因此footer它在整个页面上显示background-imagefor （减去和）。我无法动态填充整个空间（在调整浏览器窗口大小时它应该调整大小）......我该怎么做？#mainheaderfooter#main

html:

<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>

CSS：

#page {
    min-height: 100%;
    height: 100%;
    position: relative;
}

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

#header {
    text-align: center;
    background: #595959;
    font-size: 30px;
    line-height: 60px;
}

#header ul li {
    display: inline-block;
    height: 60px;
    width: 19%;
}

#header ul li:hover, #footer ul li:hover {
    background: #696969;
}

#header ul li a, #footer ul li a {
    display: block;
    text-decoration: none;
    color: #BFBFBF;
}

#footer {
    position: absolute;
    height: 50px;
    width: 100%;
    bottom: 0;
    text-align: center;
    background: #595959;
    font-size: 25px;
    line-height: 50px;
}

#footer ul li {
    display: inline-block;
    height: 50px;
    width: 15%;
}

#footer img {
    margin-right: 10px;
}
4

3 回答 3

2

<content id="main">不是有效的 HTML 标记，尽管您可以通过 CSS 将其定义为块级元素。

我建议您改为将其更改为阅读

<div id="main">
    ...
</div>
于 2013-10-26T10:39:52.937 回答
0

将此添加到您的 css...</p> 

html, body { height: 100% }

......事情应该会奏效。

见http://codepen.io/zitrusfrisch/pen/hDHrm

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

于 2013-10-26T10:39:15.243 回答
0

而不是使用此代码：

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

使用这个body

body {
    background: url('Background.jpg');
}
#main {
    padding-bottom: 50px;
}
于 2013-10-26T10:39:28.247 回答