0

I'm quite new to CSS3. I've read other questions but I'm not sure they cover my case, so please be patient :)

I have this example page:

<html>
 <head>
  <style type="text/css">
   body { background-color: black; margin: 0; }
   #main { background-color: red; width: 60%; height: 100vh; margin: auto; }
   #header { background-color: white; width: 100%; height: 25%; max-height: 100px; }
   #article { background-color: orange; width: 100%; height: 55%; }
   #footer { background-color: blue; width: 100%; height: 20%; max-height: 80px; }
  </style>
 </head>
 <body>
  <div id="main">
   <div id="header"></div>
   <div id="article"></div>
   <div id="footer"></div>
  </div>
 </body>
</html>

There's one additional mandatory behaviour I have to implement, plus an optional one.

The mandatory

As you can see yourself, once the browser window gets quite high, #header and #footer correctly stop to grow, leaving their height to the background red #main div. What I need is that #article gets this space, therefor always "pushing" the #footer to the lower border of the browser screen.

The optional

The layout itself resizes horizontally without any limit, but the #article div has setted a background image that does fade on its left and right sides. To be more precise, it's a 1000x1 image fading in from coords (1,1) to (100,1) and fading out from (901,1) to (1000,1), vertically repeated to cover the height of #article. How can I get the effect that this image stretches only in its non-fading area (so that the faded borders would not get stretched)? Can I get it without any extra div (as in that case, the mandatory behaviour would reapeat it self horizontally)?

Thank you so much :)

4

3 回答 3

0

CSS 中的动态垂直调整大小非常棘手，即使对于专业人士也是如此。据我所知，这就是我的做法；抱歉缺少代码示例，但如果它有任何问题，我希望您了解它是如何组合在一起的，以便您知道如何修复它。

#header并#footer使用 position: absolute 使自己脱离正常流程。正如你所说，他们需要一个绝对的高度。

#article具有相当于#header 的高度的填充顶部。它还将 padding-bottom 设置为页脚的高度加上其边距，以便页脚的高度包含在集成高度计算中。它的高度设置为 100%，box-sizing 设置为边框框，这样当它试图保持在 100% 时，它包括填充（不是默认行为；通常它只计算实际内容）

如果您使用像 LESS 这样的 CSS 编译框架，其中一些更容易做到，以避免每次自己重新计算像素数量（更改一个边距，必须更改另一个高度和填充）

我不知道背景知识，但你的目标听起来确实很可行，比如background-repeat和background-size; 您需要查看参考指南，例如 Mozilla Developer Wiki 上的参考指南。

于 2015-09-24T14:17:38.733 回答
0

具有页脚和页眉的百分比高度以及最大高度使得使用起来非常困难（或者至少使用我为此使用的技术）。我将css更改为固定高度，即最大高度值。如果百分比高度是为了屏幕尺寸兼容性，您可以使用媒体查询。

下面是我将如何实现布局以及仅使用 CSS 而不是图像的渐变背景图像：

body {
 background-color: black;
 margin: 0;


}
 #main {
     background-color: red;
     width: 60%;
     height: 100vh;
     margin: auto;
     position: relative;
 }
 #header {
     background-color: white;
     width: 100%;
     height: 100px;
 }
 #article {
     background-color: orange;
     width: 100%;
     top: 100px;
     bottom: 80px;
     position: absolute;
     background: rgb(179, 220, 237);
     /* Old browsers */
     background: -moz-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* FF3.6+ */
     background: -webkit-gradient(linear, left top, right top, color-stop(17%, rgba(179, 220, 237, 1)), color-stop(49%, rgba(41, 184, 229, 1)), color-stop(81%, rgba(188, 224, 238, 1)));
     /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* Opera 11.10+ */
     background: -ms-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* IE10+ */
     background: linear-gradient(to right, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1);
     /* IE6-9 */
 }
 #footer {
     background-color: blue;
     width: 100%;
     height: 80px;
     position: absolute;
     bottom: 0;
 }

以及我为测试它而创建的小提琴： Fiddle

于 2015-09-24T14:30:18.953 回答
-1

只是想知道，您是否尝试过设置以下内容？

html,body { height:100%; }
#main { height:100%; }
#article { height:100%; }

这将强制#article 与窗口的高度相同。

于 2015-09-24T14:14:59.977 回答