我有一个布局，带有两个水平列（左一个是固定的）和一个底部的页脚（固定），这是第二个（内容）列的波纹管。
当我将边框应用于第二个（内容）列时，我将其通过页脚到页面的底部，而我需要它的底部边框在页脚上方约50％。
我需要这个，因为我要将背景图像应用于内容，这也不应该通过（甚至触摸）页脚，然后左列（目前不是问题）
有人请帮助我解决我的问题。
这是一个代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html
{
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff -18px 0 no-repeat;
overflow: hidden;
}
body
{
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
}
#content
{
display:block;
height:100%;
max-height:100%;
overflow:auto;
padding-left:240px;
position:relative;
z-index:3;
}
#head
{
position:fixed;
margin:0;
top:0;
right:18px;
display:block;
width:100%;
height:100px;
background:#ddd;
z-index:5;
color:#fff;
}
#foot
{
position:fixed;
margin:0px;
bottom:-1px;
right:18px;
display:block;
width:80%;
height:50px;
background:rgb(214,100,50);
color:#fff;
text-align:right;
z-index:4;
}
#left
{
position:fixed;
left:0;
top:0;
height:100%;
width:200px;
background:#aaa;
background-position:0 100px;
color:#fff;
}
* html #head, * html #foot,* html #left
{
position:absolute;
}
#pad1
{
display:block;
width:18px;
height:100px;
float:left;
}
#pad3
{
display:block;
width:18px;
height:50px;
float:left;
}
.pad2
{
display:block;
}
</style>
</head>
<body>
<div id="foot">
<div id="pad3"></div>
<br />
{footer}
</div>
<div id="left">
<div class="pad2"></div>
{menu}
</div>
<div id="content">
<div style="border:2px solid blue;">
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
</div>
</div>
</body>
</html>
如果有人会帮助我，我会非常感谢。
这是我问题的图像链接（一个视觉）：http：//postimage.org/image/h46ilcfgr/
由于您的页脚是固定高度，您可以使用保证金来获得想要的东西。
我更改了
<div style="border:2px solid blue;">
to
<div style="border:2px solid blue; margin-bottom:75px;">
在页脚下添加了另一个元素，但在#content上添加了背景色：#fff，包含另一个带有240 px左右边缘和蓝色边框顶的元素。
删除了＃页脚的{right：18px}您是因为滚动栏而拥有的（滚动条可以与众不同，请参阅如何计算滚动条的宽度？如何计算它）
使体内的内容流动，因此使用的滚动栏是一个身体。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html
{
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff -18px 0 no-repeat;
}
body
{
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
}
#content
{
display:block;
padding-left:240px;
position:relative;
z-index:3;
}
#head
{
position:fixed;
margin:0;
top:0;
right:18px;
display:block;
width:100%;
height:100px;
background:#ddd;
z-index:5;
color:#fff;
}
#foot
{
position:fixed;
margin:0px;
bottom:-1px;
right:0;
display:block;
width:80%;
height:50px;
background:rgb(214,100,50);
color:#fff;
text-align:right;
z-index:5;
}
#left
{
position:fixed;
left:0;
top:0;
height:100%;
width:200px;
background:#aaa;
background-position:0 100px;
color:#fff;
z-index:6;
}
* html #head, * html #foot,* html #left
{
position:absolute;
}
#pad1
{
display:block;
width:18px;
height:100px;
float:left;
}
#pad3
{
display:block;
width:18px;
height:50px;
float:left;
}
.pad2
{
display:block;
}
#underfooter{ background-color:#fff; position:fixed; bottom:0; width:100%; height:100px; z-index:4; }
#underfooter .padding{ margin-left:240px; border-style:solid; border-width:2px 0 0; border-color:blue; }
</style>
</head>
<body>
<div id="foot">
<div id="pad3"></div>
<br />
{footer}
</div>
<div id="underfooter">
<div class="padding">
{under footer}
</div>
</div>
<div id="left">
<div class="pad2"></div>
{menu}
</div>
<div id="content">
<div style="border:2px solid blue;">
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
</div>
</div>
</body>