Question

http://jsbin.com/huzem/1/edit?html,css,output

在上面的网站中，如何将边框扩展到页面底部，与现在结束的位置（位于内容边缘）相比较？还有一种方法可以使边框在屏幕的右侧和左侧边缘排成一行而不使用margin的负值，例如设置margin -right和margin-left到-4%？

Answer 1

您将宽度设置为93％，然后用-4％的东西覆盖它 - 所以，不要做第一部分。默认情况下body有一些余地：所以摆脱它：

在你的html和body身上加上一个边框，比如 - red。并看看实际发生了什么。身体只伸展以适合你的内容...所以你需要告诉它有多大......（100％）然后你必须告诉里面的事情做什么等等......这不是完整/完美的答案---但它应该让你更接近你的目标。

html, body {
    height: 100%; /* remind these guys they can be as tall as the viewport if they want */
}

body{
    margin: 0; /* remove default margin */
    color: white;
    background-color: black; /* white on white is no helpful */
}

#main{
    height: 100%;
}

#content{
    border: solid white; /* you need a px value */
    min-height: 100%;
}

a {
  color:white; /* you don't need to specify for every state */
}

Answer 2

我建议你在窗口的高度设置主div，并将height属性设置为你的内容div的100％，如下所示：

#main {
  width: 93%;
  margin: -2% auto 0% auto;
  position: absolute;
  top: 0;
  bottom: 0;
}
#content {
  border: solid white;
  margin: 0% -4% 1000% -4%;
  height: 100%;
}

边框现在会延伸到页面底部！

如何将边框扩展到页面底部？

2 个答案: