gpt4 book ai didi

html - CSS:如何定义一个带有无限垂直边框且初始高度为 100% 的居中 div?

转载 作者:太空狗 更新时间:2023-10-29 15:58:18 26 4
gpt4 key购买 nike

关于 SOF 的第一个问题,如果这可能是一个愚蠢的问题,请保持温和。 :)在这里和网络上都没有找到解决方案。

我在 CSS 方面遇到了一些麻烦。我在这篇文章的末尾粘贴了我的代码,但首先我会解释我想要完成的事情:

我想构建一个居中固定宽度的内容区域,左右两侧有无尽的垂直图形边框。

这是我尝试过的:

  1. 我创建了一个 #content div,里面有一个 .wrapper div。使 div Id 居中的标准程序。为 #content 提供左边框的背景属性,为 .wrapper div 提供右背景。#content 可以正常工作:无止境的左边框。但是 .wrapper 与其内容保持相同的高度。因此,如果内容较少,那么浏览器高度和边框就不会是无限的。

  2. 如果我将内容高度设置为 100%,边框会一直显示到页面底部,但如果内容高于浏览器高度,我向下滚动边框就不会继续。

  3. 我在#content 和 .wrapper 之间插入了另一个 div:#contentbr 并赋予该 div 与 #content 相同的属性,但具有正确的边框图形:行不通,高度与包装器的内容保持一致。

尝试了一些更小的调整,但都没有达到我想要的效果。

可悲的是:Nr。如果我将 #content 的背景属性设置为此,2 工作正常:_background: url(img/content_left.png) 左上重复-y, url(img/content_left.png) 右上重复-y;_

遗憾的是,IE 不了解 CSS 3,所以这不是解决方案,因为我不能忽略 IE.. :(

所以我希望得到你们的一些帮助。必须有人知道如何施展这种魔法。


关于我的 HTML 和 CSS 示例的重要通知:我用边框属性替换了背景属性。实际上,左右边框需要是两个不同的图像,并使用注释的背景属性!

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

关于html - CSS:如何定义一个带有无限垂直边框且初始高度为 100% 的居中 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3760898/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com