han*_*boh 5 html css height border
关于SOF的第一个问题,如果这可能是一个愚蠢的问题,请保持温和.:)没有找到解决方案,无论是在这里还是在网络上.
我在CSS上遇到了一些麻烦.我在这篇文章的最后粘贴了我的代码,但首先我会解释我想要完成的事情:
我想构建一个居中的固定宽度内容区域,左右各有无限的垂直图形边框.
这是我试过的:
我创建了一个带有.wrapper div 的#content div .以div为中心的标准程序说.给#content左边框的背景属性,.wrapper div给右边框. #content正常工作:无尽的左边框.但.wrapper与其内容保持相同的高度.因此,如果内容较少,那么边框的浏览器高度将无穷无尽.
如果我将内容高度设置为100%,则边框显示到页面底部,但如果内容高于浏览器高度,则向下滚动边框不会继续.
我在#content和.wrapper:#contentbr之间插入了另一个div,并为该div提供了与#content相同的属性,但右边框图形:不工作,高度保持与包装器的内容相同.
尝试了一些更小的调整,但没有按我想要的方式解决.
可悲的是:Nr.如果我将#content的背景属性设置为:2,则工作正常:_background:url(img/content_left.png)左上方重复-y,url(img/content_left.png)右上方重复-y; _
可悲的是IE不知道CSS 3所以这是没有解决方案,因为我不能忽视IE .. :(
所以,我希望你们的帮助.有人必须知道如何做到这一点.
关于我的HTML和CSS示例的重要通知:我将border-properties替换为border-properties.实际上,左右边框需要是两个不同的图像,并使用评论的背景属性!
HTML和CSS:
<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style type="text/css">
html, body { height: 100%; }
#content
{
margin: 0 auto;
width: 950px;
/* this is the real deal: */
/* background: url("img/content_left.png") top left repeat-y; */
/* this is just for the example */
border-left: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
}
#content .wrapper
{
/* this is the real deal: */
/* background: url("img/content_right.png") top right repeat-y; */
/* this is just for the example */
border-right: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
padding: 0px 70px;
}
</style>
</head>
<body>
<div id="content">
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, lorem ut lobortis congue, ligula risus condimentum enim,
vel ornare mi elit et purus. Duis justo libero, posuere nec ullamcorper nec, tempus nec augue. Maecenas rhoncus, sapien a dapibus
accumsan, nisl mi gravida arcu, id congue neque nisi vitae lacus. Morbi dapibus mollis tempor. Praesent tortor ipsum, rhoncus in
rhoncus sit amet, luctus nec nibh. Donec enim massa, fermentum et consectetur et, iaculis nec tortor. Mauris massa elit, pellentesque
id vestibulum in, vehicula nec elit. In congue purus vitae mauris adipiscing a sollicitudin dolor consectetur. In lacus lectus,
auctor nec facilisis non, tempus ut neque. Sed id elit vel dui porta condimentum vitae ac lorem. Nam suscipit elit ac est sollicitudin
sed faucibus tellus aliquam. Sed quis libero odio, pellentesque fermentum odio. Aliquam hendrerit dignissim sapien a vestibulum.
Phasellus aliquam pretium erat eu feugiat. Quisque enim arcu, sagittis at venenatis quis, auctor vitae diam. Donec sed arcu sapien.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget lacus id enim pulvinar ullamcorper.
</p>
</div>
</div>
</body>
</html>
我删除了所有元素的边距和填充，以防止文档边缘和边框之间出现间隙。
* { margin: 0; padding: 0; }
要在 #wrapper 和 #content div 上使用 100% 高度，请使用以下命令："
#content { position: relative }
#wrapper { position: absolute }
这就是我得到的：
http://manson.revora.net/test.html