Css 边框长度-我需要它从上到下

我有一个固定宽度的页面，我试图在页面上设置左右边框，但没有成功

我知道如何显示边框，但我无法让它们到达页面底部并停留在那里，除非我将div设置为position:fixed，因为我希望它滚动，所以我的内容div不需要它。有办法绕过它吗

这是我的css文件（下面的代码使我的边框一直延伸到我的窗口的1/3，即使我设置了身高：100%）-提前谢谢：

body {
    margin: 0 auto;
    padding: 0 0 0 0;
    width: 1024px;
    /*height: 100%;*/
    min-width: 50%;
    font-family: calibri;
    background-color: #999;
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
    overflow-y: scroll;
    overflow-x: auto;
    border-right: solid;
    border-right-width: 5px;
    border-left: solid;
    border-left-width: 5px;
    border-color: #1d687b;
}

div#all {
    position: relative;
    width: 1024px;
    height: 100%;
    margin: 0 auto;
    /*padding: 0 0 5px 0;
    border-right: solid;
    border-right-width: 5px;
    border-color: #1d687b;*/
}

div#top {
    position: fixed;
    margin: 0 auto;
    width: 1024px;
    height: 145px;
    background-image: url("images/bg_ttl.jpg");
    /*border-right: solid;
    border-right-width: 5px;*/
    border-bottom: solid;
    border-bottom-width: 5px;
    /*border-left: solid;
    border-left-width: 5px;*/
    border-color: #1d687b;
    overflow: hidden;
    z-index: 1;
}

div#top_left {
    position: relative;
    width: 190px;
    height: 135px;
    padding: 5px;
    float: left;
    text-align: left;
    vertical-align: middle;
}

div#top_right {
    position: relative;
    width: 190px;
    height: 135px;
    padding: 5px;
    float: right;
    text-align: center;
    vertical-align: middle;
}

div#top_center {
    position: absolute;
    left: 200px;
    width: 624px;
    height: 135px;
    padding: 5px 0;
    float: right;
    font-family: metalord;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

div#left_menu {
    position: fixed;
    top: 150px;
    float: left;
    width: 185px;
    height: 100%;
    padding: 15px 5px 15px 5px;
    border-right: solid;
    border-right-width: 5px;
    /*border-left: solid;
    border-left-width: 5px;*/
    border-color: #1d687b;
    overflow: hidden;
}

div#content {
    position: relative;
    top: 150px;
    left: 205px;
    width: 784px;
    height: 100%;
    padding: 15px 15px 5px 15px;
    /*border-right: solid;
    border-right-width: 5px;
    border-color: #1d687b;*/
}

HTML

arserus.com
网络


&支持




创意


&组织机构
阿塞罗斯
电邮：


info@arserus.com




电话号码（cy）：


7000 17 37
家




关于我们
©2012阿塞罗斯

这个问题的老派答案是使用人造柱-

其思想是，您实际上在身体元素上使用一个1倍高、任意宽的背景图像，包括作为图像一部分的“边框”，并垂直平铺图像

诚然，它不依赖CSS边框，进行更改涉及图像编辑，但它是可靠的

---

在大多数情况下，我发现使用固定高度的概念进行网页设计是有问题的，我试图避免它。

听起来好像还有另一个css规则与您的边界规则相冲突。因此，我首先要做的是：

删除所有css规则

应用css边框规则

每次重新添加一条规则，直到样式突破问题规则 这将缩小问题范围，使解决方案更容易找到。

---

除此之外，您还可以尝试将边框样式应用于

标记。希望这有帮助

您可以尝试设置静态高度：

height: 768px;

如果您希望在CSS中创建一个基于百分比的流体高度方案，那么这将非常困难。您可以尝试使用jQuery获取窗口高度，并根据以下内容设置元素的样式：

var divHeight = $(document).height();
$('#yourDivId').height(divHeight);

---

你可以发布HTML来配合这个CSS？HTML代码吗？理想情况下是JSFIDLE。看看这里或谷歌上的

css全高布局

我确实使用了html。。。它把边界带到了底部。。。但是它破坏了我的内容分区溢出。。。它总是摇摆不定，当它摇摆不定时，边界不会永远停留在底部。。。如果我查一下，你可以看到边界在上升啊。。。我上面的评论应该在这里。。。对不起..>！没关系。：）嗯，很有趣。另一种可能是在800px的线路上增加2个

？高度，并使用css将它们移动到位置，然后将

position:fixed

应用于两者。我不确定它是否有效，但这是一个想法……好的。我解决了溢出问题。刚刚将我的（内容分区）从高度：100%更改为高度：自动。所以，我现在唯一的问题是，当我必须向下滚动时，如何保持边界不变。干得好！我认为下面的答案最适合你的边境目的。搞乱

位置：固定的
可能很棘手…）好吧，问题是，如果你必须使用css
border
规则以外的东西，那么重复-y的
img
可能最容易移动到位。
var divHeight = $(document).height();
$('#yourDivId').height(divHeight);