Question

我是CSS的新手，经过一些搜索后，他们开始了解将网页布局拉伸到屏幕边缘的不同方法。我正在搜索此主题以创建响应式布局。我采用了两种不同的方式：

body {
    font-family:arial,helvetica,sans-serif;
    font-size:12px;
    margin:0;
}
#wrapper {
    width:100%;
}
#header {
    width:100%; 
    height:70px;
    padding:20px;
    background:#00CCCC;
    font-size:30px;
    font-weight:bold;
}

结果如下：http://jsfiddle.net/wPpk8/3/

，第二种正确的方法是：

h2 { 
  background: black;
  color: white;
  padding: 15px 0;
}
h2:before {
  right: 100%;
}
h2:after {
  left: 100%;
}
h2:before, h2:after {
  content: "";
  background: black;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9999px;
}

结果如下：http://jsfiddle.net/wPpk8/2/

请建议采用哪种方式？请记住，我将以这种方式创建整个Web布局。谢谢！

Answer 1

但是，示例中使用:before和:after伪元素的方法可以正常工作。它没有任何问题，但它可能是有限的。

另一种方法是为您的内容使用多个父元素，或者我喜欢称之为内包装。

内包装：

HTML：

<div class="bar green">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

<div class="bar blue">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

CSS：

.bar   { padding: 2em; }
.green { background: #c0ff33; }
.blue  { background: #c0ffee; }

.wrap {
  margin: 0 auto;
  max-width: 800px;
}

Here's a pen。

您还可以使用calc将内容从其父元素中推出。

图像拉伸到容器边缘的示例：

HTML：

<div class="wrap">
  <img src="image.jpg">
</div>

CSS：

.wrap {
  padding: 2em;
}

img {
  width: calc(100% + 4em); /* add the left/right padding from the wrapper to the width of the image */

  position: relative;
  left: -2em; /* move the image to the edge of the wrapper */
}

Here's a pen。

calc的

Here's the browser support。

希望这有帮助！

Answer 2

从这两个更好的方式是第一个。但是当它在包装纸中也是100％宽度时，当然没有必要将100％的宽度放到标题上。

在响应式网页设计中，您应该为某些基本元素设置宽度，而不是为html代码中的每个元素设置宽度。

Answer 3

我不确定你要做什么。如果您没有使用CSS指定额外宽度，则默认情况下，块元素将是100％宽。这是一个基于您的第一个解决方案的示例，它将为您提供相同的结果，而不会使事情变得复杂：

* {margin:0;padding:0;}
body {
    font-family:arial,helvetica,sans-serif;
    font-size:12px;
}

#header {
    padding:20px;
    background:#00CCCC;
    font-size:30px;
    font-weight:bold;
}

http://jsfiddle.net/wPpk8/4/

在CSS中将网页布局延伸到屏幕边缘的更好方法是什么？

3 个答案:

内包装：

图像拉伸到容器边缘的示例：