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

尽管内容中有内容，我的主域div仍然没有高度或宽度。我希望#main div填充页眉和页脚之间100％的空间，以便在整个页面（不包括页眉和页脚）中显示#main的背景图像。我一直无法获得#main动态填充整个空间（当浏览器窗口调整大小时，它应该调整大小）......我该如何做到这一点？即使内容有内容，内部div也有0x0大小

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

来源

2013-10-26 wkeithvan

设置宽度为100％; –

你试过我的建议吗？见下文… –

添加到您的CSS ...

html, body { height: 100% }

...，事情应该工作。

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

而且，是啊，你应该解决您的HTML作为<content>是不是一个有效的元素。请参阅笔以获取有效解

来源

2013-10-26 10:39:15

而不是使用此代码：

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

上body

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

来源

2013-10-26 10:39:28

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

来源

2013-10-26 10:39:52 Nightfirecat

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

回答

相关问题