1

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

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

目前我还没有在底部设置边距。

如您所见，它没有到达页面底部，我也想要它。我意识到你的电脑可能，因为我的屏幕很大。

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;
}
4

4 回答 4

0

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

于 2013-06-27T23:08:34.870 回答
0

我认为您想粘贴#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-rightand margin-left。幸运的是，由于百分比基数width，它很简单。

希望能帮助到你。

于 2013-06-27T23:09:13.837 回答
0

根据我的经验，通过使用 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);

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

请参阅此小提琴以获取快速而肮脏的示例：http: //jsfiddle.net/HLJJc/

于 2013-06-27T23:16:14.300 回答
0

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

你设置：

 html, body {height: 100%;}

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

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

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

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

干杯!

于 2013-06-27T23:30:25.277 回答