100％使用高中央部分CSS只

这里是JS提琴我做：http://jsfiddle.net/K6CFU/100％使用高中央部分CSS只

的结构是完全一样的，我用我的网站，但问题是，我没有收到中段我的网站百分之百高。现在它的内容决定了它有多高。

<body> 
    <div id="page-container"> 
     <header></header> 

     <div id="page-wrapper"> 
      <div id="page-content"> 

      </div> 
     </div> 

     <footer></footer> 
    </div> 
</body> 

html, body { height: 100%; padding: 0; margin: 0; } 

header { width: 100%; height: 50px; background-color: red; } 

footer { width: 100%; height: 50px; position: absolute; bottom: 0; background-color: green; } 

#page-wrapper { width: 1024px; margin: 0px auto; background-color: yellow; } 
#page-content { height: 100%; background-color: pink; }

来源

2013-04-29 Michael Libman

不是100％确定我知道你的意思，但你有没有尝试添加高度：100％的页面包装div？

#page-wrapper{ 
height:100%; 
width: 1024px; 
margin: 0px auto; 
background-color: yellow; 
}

来源

2013-04-29 22:20:03 cih

我碰到过去这个问题。我看到它的方式是当你指定height: 100%;时，它填充到div的100％（或任何元素） - 但不是屏幕大小。我总是不得不在某个地方使用min-height以获得您正在寻找的类似结果。

躯干或可能是您的page-wrapper格，可以尝试使用min-height: 500px;（或任何你觉得是适当的大小。

来源

2013-04-29 22:20:14 EnigmaRM

使页面容器

height: 100%;

，使对象内部知道盒子的大小。

比就可以使页面包装

position: absolute; 
bottom: 50px; 
top: 50px; 
height: auto; /*can also be left away*/

现在中间部分将是 http://jsfiddle.net/K6CFU/5/

可以使页面的内容

height: 100%;

，或者你可以把它拿走，就像你想要的页脚和头之间。

来源

2013-04-29 22:33:19

100％使用高中央部分CSS只

回答

相关问题