1

我有一个网页，分为页眉、页面和页脚。

问题是我制作了页面height :auto;。但它不起作用，我需要页面自动长大。

这就是我在 CSS 中的内容：

/* Page */

#page-wrapper {
    overflow: auto;
    height: auto;
    text-align: center;
}

#page {
    overflow: auto;
    width: 1120px;
    margin: 0px auto;
    padding: 50px 40px;
    color: #8F8F8F;
    min-height:700px;
    height:auto;

}

和 HTML：

<body>
<div id="banner">
  <div class="img-border">
    <div id="header-wrapper">
      <div id="header">      
        <div id="logo">
        </div>
       </div>
      </div>
     </div> 
    </div>
<div id="wrapper">
  <div id="page-wrapper">
    <div id="page">
      <div id="wide-content">
      </div>
    </div>
  </div>
</div>
4

3 回答 3

2

目前还不清楚你想要什么。

在您的第一行中，您说您想要一个页脚，但您的 HTML 和 CSS 不显示任何页脚。

如果您想要一个粘在页面底部的页脚，请查看CSS Sticky Footer。

于 2013-05-10T23:11:15.397 回答
0

你根本不需要那里的高度......一个div会随着它里面的内容量而增长或缩小。尝试删除 height: auto; 完全地。

如果您的意思是即使没有足够的内容也希望将内容部分设为页面高度的 100%，这应该有助于使 div 成为浏览器窗口的 100% 高度

于 2013-05-10T22:53:24.437 回答
0

您的意思是您希望页面底部的页脚和中间的 div 占据剩余空间（从您的措辞中很难确定）？

如果这是您想要的，我建议您查看此博客文章： http: //matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

HTML总结：

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS总结：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
于 2013-05-10T23:09:51.997 回答