CSS3负保证金发行_Css - Fatal编程技术网

CSS3负保证金发行

css

CSS3负保证金发行,css,Css,我知道我的问题在这个网站上被多次提到。然而，我似乎找不到我的答案。我正在尝试在我的页面上创建一个粘性页脚。我的页面分为3个部分顶部中间的底部我已经创建了一个layout.css文件。这是： html,body { margin: 0; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; height: 100%; margin: 0 auto; position:relative; } #p

我知道我的问题在这个网站上被多次提到。然而，我似乎找不到我的答案。我正在尝试在我的页面上创建一个粘性页脚。我的页面分为3个部分

顶部中间的底部我已经创建了一个layout.css文件。这是：

html,body { 
  margin: 0; 
  font-family: Tahoma, Geneva, sans-serif; 
  font-size: 14px; 
  height: 100%;
  margin: 0 auto;
  position:relative;
}

#pageTop {
  height: 90px;
}

#pageMiddle {

  min-height: 100%;
  margin-bottom: -50px;
}

#pageMiddle:after {
  content: "";
  display: block; 
}
#pageBottom, #pageMiddle:after {
  height: 50px; 
}

我不明白如何将pageTop高度从pageMiddle min高度删除。这似乎就是问题所在

谢谢你们在这件事上的帮助。

大家好，谢谢你们给了我一些建议。几天后，我终于得到了答案

如上所述，我有3个部门：

顶部中间的底部我试图在我的底部分区上应用粘性页脚，但没有成功

下面是我如何解决这个问题的

我在包装器div中插入了顶部和中部div。在我的页面上只有两个主div。现在看起来像这样

包装纸顶部中间的底部以下是css：

#wrapper{
    min-height: 100%;
    margin-bottom: -50px;
}
#top {
    width:1000px;
    margin:0 auto;
    height: 90px;
}

#middle {
    width:1000px;
    margin:0 auto;
}

#wrapper:after {
    content: "";
    display: block; 
}
#bottom, #wrapper:after {
    width:1000px;
    height: 50px; 
    margin:0 auto;
}

这是我的html模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My title</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrapper">
    <div id="top">Header</div>
    <div id="middle">Content</div>
<div id="bottom">Footer</div>
</body>
</html>

这很简单，但很有效

再次感谢您的回复。

我真的无法理解您的问题。我也是。你能在JSFIDLE或类似的工具上重新创建你的情况吗？你需要jquery来实现这一点，你必须为pageTop创建一个变量并使用90px作为值，然后将中间的css高度设置为pageMiddle-pageTop，并将新的结果变量添加为pageMiddle的内联高度css。你能改用百分比高度吗？将PageTop设置为10%，则pageMiddle将变为90%，而“页边距下限：-50px”将使pageMiddle沿页面向下移动。我想你想把它向上移动，这样它就不会被页脚重叠了，对吗？在这种情况下，任意一个边距顶部：-50px；'或页边距底部：50px；`我们应该这样做