Question

我对CSS比较新。我正在尝试使用 HTML＆amp; amp;创建正常的页面布局CSS ，但我遇到了一个问题。这是我的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>

这是我的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 
{
    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;
}

我正在尝试创建页眉，页脚和内容div。但我的内容div应该自动改变它的高度。如果内容div中没有任何内容，那么我的页面应至少具有内容高度等于（页面高度 - （页眉高度+页脚高度））。

Answer 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，当内容不足以填满页面时。

编辑：我用我想到的解决方案创建了a fiddle。正如我所说，我稍微改变了你的标记，但希望这对你来说不是问题。

我还使页眉和页脚变得更小，只是为了让它更容易在jsfiddle上玩。

Answer 2

如何将位置改为亲戚？我摆弄了一下：

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

JsFiddle example。看到它并告诉我这就是你想要的。

Answer 3

你正在使用height: 100%;你不能使用％try设置身高：min-height:450px;这样做会设置最小高度并在内容增加时增加

Answer 4

您可以使用以下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;
}

请点击此处查看详细内容： http://jsfiddle.net/EeCk9/

此处没有内容： http://jsfiddle.net/EeCk9/1/

网页的CSS布局？

4 个答案: