Question

每当我编码时，我都会遇到这种麻烦。

我将高度设置为100％。我希望div能够到达页面的底部，无论其中有多少信息，除了底部的300px边距外。

目前我还没有在底部设置保证金。

正如您所看到的，它没有到达页面的底部，我也想要它。我知道你的电脑可能，因为我的屏幕相当大。

DIV被称为“包装器”。

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design At Ease - Home</title>
</head>
<body>
<div id="header">
<div id="logo"><a class="logoclass">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li><a href="index.html">Home</a></li>
<li><a href="coding.html">Coding</a></li>
<li><a href="graphics.html">Graphics</a></li>
<li><a href="database.html">Database</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="more.html">More</a></li>
</ul>
</div>
<ul id="quicklinks">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="photoshop.html">Photoshop</a></li>
</ul>
<div id="wrapper"></div>
</body>
</html>

CSS

body{
background:#fffffc;
margin: auto auto;
}

#header{
background:#e5e5e5;
height:35px;
width:100%;
border-bottom: 1px #c9c9c9 solid;
}

#headerlinks{
position:relative;
display:inline;
float:right;
margin-right:5%;
bottom:37px;
}

#headerlinks li{
display:inline;
padding-left:25px;
}

#headerlinks li a{
color:#777777;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}

#headerlinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}


#headerlinks li a:active{
color:#00B2EE;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}


#logo{
position:relative;
color:black;
margin-left:5%;
top:5px;
}

.logoclass{
color:#212121;
display:inline;
font-size:24px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-46px;
position:relative;
clear: right;
}

#quicklinks li{
position:relative;
top:2px;
display:inline;
padding-right:20px;
}

#quicklinks li a{
color:#777777;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks li a:active{
color:#00B2EE;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}


#wrapper{
position:relative;
top:-62px;
margin-left: auto;
margin-right: auto;
width:90%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}

Answer 1

使用高度100％将占用容器的100％高度 - 因此您需要将body和html设置为100％高度。

Answer 2

我认为你想把#wrapper贴在页面底部（除了底部的一些空格）

我已经改变了你的代码： http://jsfiddle.net/FgGn5/

#wrapper{
position:absolute;
bottom:20px;
margin: 0 5%;
width:90%;
height:20px;
background:red;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}

需要absolute位置才能坚持到底部。由于absolute位置，我们被迫指定margin-right和margin-left。幸运的是，由于基数为width，因此很简单。

希望它有所帮助。

Answer 3

根据我的经验，通过使用JavaScript解决方案，您将在各种常见浏览器中取得最佳成功。我强烈建议使用jQuery让你的生活更轻松一点。那么你基本上可以将#wrapper DIV设置为等于身高减去#header和#quicklinks。它看起来像这样：

var windowHeight = $(window).height();
var headerHeight = $('#header').outerHeight(false);
var linksHeight = $('#quicklinks').outerHeight(false);
var wrapperHeight = windowHeight - (headerHeight + linksHeight);

$('#wrapper').css('min-height', wrapperHeight);

注意：我正在使用min-height，因为#wrapper DIV的内容实际上可能已经将它推到了屏幕的底部。

请参阅此小提琴，了解一个快速而肮脏的例子：http://jsfiddle.net/HLJJc/

Answer 4

这是我一直使用的解决方案。 http://www.cssstickyfooter.com/

你设置：

 html, body {height: 100%;}

将300px底部填充添加到主包装，然后将负边距-300px添加到页脚以将其覆盖在填充之上。

使用一个巨大的包装器来处理除页脚之外的所有内容：

<div id="wrap">
  <div id="main">
  </div>
</div>
<div id="footer">
</div>

查看该链接了解更多信息。

干杯！

怎么得到div所以它总是到底？

4 个答案: