Question

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

我知道如何显示边框，但我无法让它们到达页面的底部并保持在那里，unlees我将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

<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arserus.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="all">
<div id="top">

<div id="top_left">
<span class="ttl_sd_l">
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> network
 <br />
&nbsp;&nbsp;& support
 <br />
 <br />
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> creative ideas
 <br />
&nbsp;&nbsp;& organization</span>
</div>

<div id="top_center">
    <span class="ttl_txt">ARSERUS</span>
</div>

<div id="top_right">
<div>
<span class="ttl_sd_r">
<u>e-mail:</u>
 <br />
info@arserus.com
 <br />
 <br />
<u>phone No. (cy):</u>
 <br />
7000 17 37</span>
</div>
</div>
</div>

<div id="left_menu">
<div align="right">
 <span class="mn_lnk"><a id="p_home" class="lnk">home</a></span>
 <br />
 <br />
 <span class="mn_lnk"><a id="p_about" class="lnk">about us</a></span>
</div>
<div id="cp_rght">
 <span class="txt_cr">© 2012 ARSERUS</span>
</div>
</div>

<div id="content">
<?php
require_once('p_home.php');
?>
</div>
</div>
</body>
</html>

Answer 1

旧学校对这个问题的回答是使用Faux Columns -

http://www.alistapart.com/articles/fauxcolumns/

您的想法是，您实际上在身体元素上使用背景图像，该背景图像高1px，并且可以根据需要使用背景图像，包括作为图像一部分的“边框”，以及垂直平铺图像。

是的，它不依赖于CSS边框，并且进行更改涉及图像编辑，但可靠。

在大多数情况下，我发现接近网页设计的想法是固定高度有问题，我试图避免它。

Answer 2

听起来有另一条css规则与你的边界规则相冲突。所以我要做的是：

删除所有css规则。
应用您的CSS边界规则。
一次重新添加其他规则，直到样式突破问题规则。

这将缩小问题范围，并使解决方案更容易找到。除此之外，您可以尝试将边框样式应用于<html>标记。希望这有帮助！

Answer 3

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

height: 768px;

如果你想在CSS中制作一个流畅的（基于％的）高度方案，那真的很难。您可以尝试使用jQuery来获取窗口高度并根据以下内容设置元素样式：

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

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

3 个答案: