CSS：如何定义一个具有无限垂直边框且初始高度为100%的居中div？

发布于 2024-09-24 11:35:14 字数 3652 浏览 5 评论 0原文

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

我在使用 CSS 时遇到了一些麻烦。我将我的代码粘贴在本文的末尾，但首先我将解释我要实现的目标：

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

这是我尝试过的：

我创建了一个 #content div，里面有一个 .wrapper div。我想说的是将 div 居中的标准程序。为 #content 指定左边框的背景属性，为 .wrapper div 指定右背景。 #content 工作正常：无尽的左边框。但是 .wrapper 与其内容保持相同的高度。因此，如果内容较少，则浏览器高度的边框不会是无尽的。
如果我将内容高度设置为 100%，边框会显示到页面底部，但如果内容高于浏览器高度，并且我向下滚动边框不会继续。
我在#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 示例的重要通知：我用边框属性替换了背景属性。实际上，左边框和右边框需要是两个不同的图像，并使用注释的背景属性

！ 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>

原文

First question on SOF, please be gentle if this may be a stupid question. :)
Haven't found a solution, neither here nor on the web.

I got some trouble with CSS. I pasted my code at the end of this post but first Ill explain what I'm trying to accomplish:

I want to build a centered fixed-width content area with endless vertical graphical borders to the left and right.

This is what I tried:

I created a #content div with a .wrapper div inside. Standard procedure to center a div Id say. Gave the #content the background property for the left border and the .wrapper div the right background.
#content works fine: endless left border.
But .wrapper stays the same height as its content. So if there is less content then the browser-height the border won't be endless.
If I set the content heights to 100% the borders show till the bottom of the page, but if the content is higher then the browser height and I scroll down the borders don't continue.
I inserted another div between #content and .wrapper: #contentbr and gave that div the same propertys as #content but with the right border graphic: Won't work, the height stays the same as the content of the wrapper.

Tried some more minor tweaks but neither worked out the way I want it.

Sad thing is: Nr. 2 works fine if I set the background property of #content to this:
_background: url(img/content_left.png) top left repeat-y, url(img/content_left.png) top right repeat-y;_

Sadly the IE doesn't know CSS 3 so this is no solution as I can't ignore the IE.. :(

So im hoping for some help of you guys. Someone has to know how to do this magic.

Important notice on my HTML & CSS example:
I replaced the background-properties with border-properties. In reality the left and right borders need to be two different images and use the commented backround-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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧城空念 2024-10-01 11:35:14

我删除了所有元素的边距和填充，以防止文档边缘和边框之间出现间隙。

 * { margin: 0; padding: 0; }

要在 #wrapper 和 #content div 上使用 100% 高度，请使用："

#content { position: relative } 
#wrapper { position: absolute }

这就是我得到的：

http://manson.revora.net/test.html

I removed the margin and padding from all elements to prevent the gap between document edge and border.

 * { margin: 0; padding: 0; }

To use the 100% height on the #wrapper as well as the #content div, use this:"

#content { position: relative } 
#wrapper { position: absolute }

This is what I get:

http://manson.revora.net/test.html

回复收藏 0 原文

穿越时光隧道 2024-10-01 11:35:14

据我所知，最小高度黑客要求您按以下顺序放置属性：

min-height: 100%;
height: auto !important;
height: 100%;

也许我错了，但我确信这是唯一的方法。

如果页面中心有一个 100% 高度的 div，为什么不创建一个可以应用于正文的重复背景，或者最外层的容器，该背景将重复到框的最大尺寸？

使用：

border: solid #000;
border-width: 0 1px;

或者，只需在外部 div 上

The min-height hack, as far as I know requires that you put the properties in the following order:

min-height: 100%;
height: auto !important;
height: 100%;

Maybe I'm wrong, but I was certain that was the only way around it.

If you've got a 100% height div in th center of the page why don't you create a repeating background that you can apply to the body, or the outer-most container that will repeat to the maximum size of the box possible?

Or, just use:

border: solid #000;
border-width: 0 1px;

on your outer div

回复收藏 0 原文

空城旧梦 2024-10-01 11:35:14

稍微改变了布局。

从 .wrapper 我删除了所有高度信息。

从 #content 中，我删除了 height: auto !important; 并将 height: 100%; 外包到

html #content { height: 100%; }

#content< 下方/code> 和 .wrapper

现在它可以正常工作了（即使有图形边框）。初始高度为 100%，如果内容超过窗口高度则继续边框：

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;
  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;
  padding: 0px 70px;
}

* html #content {
  height: 100%;
}

<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>

Changed the layout a bit.

From .wrapper I removed all height information.

From #content I removed the height: auto !important; and outsourced the height: 100%; to

html #content { height: 100%; }

Just below #content and .wrapper

Now it works the way it should (even with graphical borders). Inital height of 100% and continuing borders if content exceeds window height:

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;
  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;
  padding: 0px 70px;
}

* html #content {
  height: 100%;
}

<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>

回复收藏 0 原文

~没有更多了~