1

私のコンテンツ#main divはありませんheight。と の間のスペースを 100% 埋めて、ページ全体にforを表示しwidthたい(とを除く)。このスペース全体を動的に埋めることができませんでした(ブラウザー ウィンドウのサイズが変更されると、サイズも変更されるはずです)... どうすればよいですか?#main divheaderfooterbackground-image#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を参照してください。

そして、ええ、<content>有効な要素ではないため、HTML を修正する必要があります。有効な解決策についてはペンを参照してください。

于 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 に答える