1

I am relatively new to CSS. I am trying to create a normal page layout using HTML & CSS, but I am facing an issue. Here is my HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery</title>
    <link rel="stylesheet" type="text/css" href="../css/StyleSheet1.css">
    <script type="text/javascript" src="../javascript/jQuery.js""></script>
</head>
<body>
    <div class="container">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>
    </div>
</body>
</html>

Here is my CSS script

html,body
{
    padding: 0px;
    margin: 0px;
    color: #555;
    font-size: 20px;
    font-family:  "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
    height: 100%;
}

.container
{
    height: 100%;
    background-color: Green;
    position: relative;
}

.header 
{
    height: 300px;
    width: 100%;
    background-color: Red;
}

.content
{
    width: 100%;
    background-color: Black;
}

.footer
{   
    height: 500px;
    width: 100%;
    background-color: Violet;
    position: absolute;
    bottom: 0px;
}

I am trying to create a header, footer and a content div. But my content div should automatically change it's height. If there is nothing inside content div then my page should at least have content height equal to (page height - (header height + footer height)).

4

4 回答 4

1

您可以在这里查看 Ryan Fait 的“粘性页脚”：http ://ryanfait.com/sticky-footer/

它完全符合您的描述（即页脚始终至少位于页面底部，即使内容 div 不够长）。

不过，它确实需要您对标记进行一些小的更改。你最终会得到

<body>
    <div class="container">
        <div class="header"></div>
        <!-- this is where you put your content -->
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>

而不是你已经拥有的。“推” div 是当内容不足以填满页面时填充空间的空 div。

编辑：我用我想到的解决方案创建了一个小提琴。正如我所说，我稍微更改了您的标记，但希望这对您来说不是问题。

我还使页眉和页脚更小，只是为了更容易在 jsfiddle 上使用。

于 2013-07-16T17:04:05.227 回答
1

如何将位置更改为相对？我稍微摆弄了一下：

.footer
{   
    height: 500px;
    width: 100%;
    background-color: green;
    position: relative;
    bottom: 0px;
}

JsFiddle 示例。看到它并告诉我这是你想要的。

于 2013-07-16T17:49:56.920 回答
0

You can achieve this with the following CSS:

html,body {
  padding: 0px;
  margin: 0px;
  color: #555;
  font-size: 20px;
  font-family:  "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans    unicode",tahoma,sans-serif;
  height: 100%;
}

.container {
  height: 100%;   
  background-color: Green;
  position: relative;
}

.header {
  position: relative;
  height: 150px;
  width: 100%;
  background-color: Red;
  z-index: 1; /* higher than z-index of content */
}

.content {
  width: 100%;
  position: relative;
  top: -150px; /* - height of header */
  padding-top: 150px; /* + height of header */
  margin-bottom: -350px; /* - (height of header + height of footer) */
  padding-bottom: 200px; /* height of footer */
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
  z-index:0; /* lower than z-index of header */
  background-color: Black;
}

.footer {   
  height: 200px;
  width: 100%;
  background-color: Violet;
  position: relative;
  bottom: 0px;
}

See fiddle with long content here: http://jsfiddle.net/EeCk9/

And without content here: http://jsfiddle.net/EeCk9/1/

于 2013-07-16T17:45:20.810 回答
0

您正在使用height: 100%;您无法使用 % 尝试使用设置高度：min-height:450px;这将设置最小高度并在内容增加时增加

于 2013-07-16T17:40:53.680 回答