CSS 挑战：两个背景图像，居中列并固定，最小高度 100%

发布于 2024-08-27 12:35:38 字数 990 浏览 5 评论 0原文

简而言之

我需要一个CSS解决方案来满足以下要求：

两个垂直重复的背景图像，一个左对齐，一个右对齐，
顶部居中的列，宽度固定，最小高度为100%
跨浏览器兼容性

更多细节

今天我当前的网站项目出现了一个新需求：左右两侧带有渐变的背景图像（替换当前的正文背景图像）。现在的挑战是指定两个不同的背景图像，同时保留布局规范的其余部分。不幸的是，（简单的）布局在某种程度上并不适合这两个背景。

我的布局基本上是一个具有固定宽度的居中列：

#main_container {
    background-color: white;
    margin: 0 auto;
    min-height: 100%;
    width: 800px;
}

此外，有必要将列拉伸到最小高度 100%，因为有相当多的页面只有很少的内容。以下 CSS 样式可以解决这个问题：

html {
    height: 100%;
}

body {
    background-image: url('old-background.png');
    margin: 0;
    height: 100%;
    padding: 0;
}

到目前为止一切顺利 - 直到带有渐变的新身体背景图像出现。我尝试了以下解决方案

主容器后面的两个绝对定位的div
一张用主体定义的图像，一张用html CSS类
定义的一张图像用主体定义，另一张用大div开始主容器

使用其中之一，动态高度解决方案被破坏了。要么是主容器太小而没有拉伸到 100%，要么是当内容实际上较长时背景仍保持在 100%

原文

In a nutshell

I need a CSS solution for the following requirements:

Two vertically repeated background images, one aligned to the left, one aligned to the right
One centered column on top with fixed width and a minimum height of 100%
Cross browser compatibility

A little more details

Today a new requirement for my current web site project came up: A background image with gradients on the left and right side (replaces the current body background image). The challenge is now to specify two different background images while keeping the rest of the layout spec. Unfortunately the (simple) layout somehow doesn't go with the two backgrounds.

My layout is basically one centered column with fixed width:

#main_container {
    background-color: white;
    margin: 0 auto;
    min-height: 100%;
    width: 800px;
}

Furthermore it's necessary to stretch the column to a minimum height of 100%, since there are quite some pages with only little content. The following CSS styles take care of that:

html {
    height: 100%;
}

body {
    background-image: url('old-background.png');
    margin: 0;
    height: 100%;
    padding: 0;
}

So far so good - until the new body background image with gradients arrived. I tried the following solutions

Two absolute positioned divs behind the main container
One image defined with the body, one with the html CSS class
One image defined with the body, the other one with a large div begind the main container

With either one of them, the dynamic height solution was ruined. Either the main container didn't stretch to 100% when it was too small, or the background remained at 100% when the content was actually longer

分享到QQ

分享到微博

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

发布评论

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

只是我以为 2024-09-03 12:35:39

[修改]

我很傻。非常。
问题：body 需要有背景图像，#main_container 需要有 800 宽度并位于中心。
（糟糕的方法：我正在使用背景图像进行 #main_container ，不居中，800px。）

新方法：我建议在 body 内使用 div 并在新的 div 中添加一个 span：

<body>
<div>
<span>
  <div id="main_container">
    Regular contents.
  </div>
</span>
</div>
</body>

然后：

body {
  background: url(img/bg_left.gif) repeat-y top left;
}
body>div {
  background: url(img/bg_right.gif) repeat-y top right;
}
body>div: {
  text-align: center;
}
body>div>span {
  display: inline-block;
  /* IE only likes this rule on elements that are inline by nature, thus the use of span.
  I'm not sure 100% height will work on #main_container. */
}

还有你的常规规则：

#main_container {
  background-color: white;
  margin: 0 auto;
  min-height: 100%;
  width: 800px;
}

[revamp]

I'm silly. Very.
Problem: body needs to have bg images, #main_container needs to have 800 width and in the center.
(Lousy approach: I was doing #main_container with bg images, not centered, 800px.)

New approach: I suggest a div inside body and a span inside that new div:

<body>
<div>
<span>
  <div id="main_container">
    Regular contents.
  </div>
</span>
</div>
</body>

Then:

body {
  background: url(img/bg_left.gif) repeat-y top left;
}
body>div {
  background: url(img/bg_right.gif) repeat-y top right;
}
body>div: {
  text-align: center;
}
body>div>span {
  display: inline-block;
  /* IE only likes this rule on elements that are inline by nature, thus the use of span.
  I'm not sure 100% height will work on #main_container. */
}

And your regular rules:

#main_container {
  background-color: white;
  margin: 0 auto;
  min-height: 100%;
  width: 800px;
}

回复收藏 0 原文

当梦初醒 2024-09-03 12:35:38

修改：

<body>
  <div class="container"><div>
  <div id="main_content"></div>
</body>

使用CSS：

html {
  height: 100%;
}
body {
  background: url(left.png) repeat-y top left;
  background-attachment:fixed;
  height: 100%;
  margin: 0;
  padding: 0;
}
div.container {
  background: url(right.png) repeat-y top right;
  height: 100%;
  width: 100%;
  position:fixed; /* This won't work in all browsers. May need a JS solution for IE6 */
}
#main_content {
  height: 100%;
  width: 800px;
  margin: 0 auto;
  background-color: white;
}

编辑：

此版本适用于支持position:fixed（不是ie6）的浏览器。

示例页面： http://jsbin.com/ebozi3/4/edit

Modified:

<body>
  <div class="container"><div>
  <div id="main_content"></div>
</body>

With css:

html {
  height: 100%;
}
body {
  background: url(left.png) repeat-y top left;
  background-attachment:fixed;
  height: 100%;
  margin: 0;
  padding: 0;
}
div.container {
  background: url(right.png) repeat-y top right;
  height: 100%;
  width: 100%;
  position:fixed; /* This won't work in all browsers. May need a JS solution for IE6 */
}
#main_content {
  height: 100%;
  width: 800px;
  margin: 0 auto;
  background-color: white;
}

Edit:

This version works for browsers that support position:fixed (not ie6).

Example page: http://jsbin.com/ebozi3/4/edit

回复收藏 0 原文

老街孤人 2024-09-03 12:35:38

使用“布局表”，我的问题可以解决。然而，纯 CSS 解决方案将是首选！

这是一个基于工作表的解决方案：

table.layout {
  border-collapse: collapse;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

table.layout td {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

td.layout_left {
  background-image: url('background-left.png');
  background-position: top left;
  background-repeat: repeat-y;
}

td.layout_center {
  background-color: white;
  width: 800px;
}

td.layout_right {
  background-image: url('background-right.png');
  background-position: top right;
  background-repeat: repeat-y;
}

HTML 代码：

<table class="layout">
  <tr>
    <td class="layout_left"> </td>
    <td class="layout_center">
      <!-- content -->
    </td>
    <td class="layout_right"> </td>
  </tr>
</table>

Using a "layout table", my issue can be solved. A pure CSS solution, however, would be preferred!

Here's a working table-based solution:

table.layout {
  border-collapse: collapse;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

table.layout td {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

td.layout_left {
  background-image: url('background-left.png');
  background-position: top left;
  background-repeat: repeat-y;
}

td.layout_center {
  background-color: white;
  width: 800px;
}

td.layout_right {
  background-image: url('background-right.png');
  background-position: top right;
  background-repeat: repeat-y;
}

And the HTML code:

<table class="layout">
  <tr>
    <td class="layout_left"> </td>
    <td class="layout_center">
      <!-- content -->
    </td>
    <td class="layout_right"> </td>
  </tr>
</table>

回复收藏 0 原文

~没有更多了~