Question

我目前正在构建我的投资组合网站。

我正在处理的页面可以在这里找到：http://www.infomaticfilms.com/jack/jrimg/g_and_d.htm。

它还远没有完成，因为我不想继续前进，直到我解决这个问题。此页面将是所有各种项目页面的通用页面，这意味着它们将具有不同的高度。我不想为每个项目制作单独的页面，而是仅仅通过每次删除内容并重新保存页面来制作一个我可以用于所有项目的页面。如果单击“我”或“联系人”链接，您可以看到其他页面以查看边框。我阅读了Stack Overflow上的一篇文章，它帮助我非常接近解决方案。我有一个Firefox问题，虽然右边框增加了1个像素。这是HTML：

<div class="contentAndBorders">   
 <div class="borderLeft"></div>   
 <div class="mainContentProjectPage">
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>   
</div>   
<div class="borderRight"></div> 
</div>

我希望将内容放入带有mainContentProjectPage类的div中。我需要使用borderLeft和borderRight类的div来扩展mainContentProjectPage的高度，这样边框看起来是连续的，这是他们目前所做的。它基本上是三列。第一列和第三列是左侧和右侧的白色边框，中间列是内容。这是CSS：

.contentAndBorders {
      width: 950px;
      position: relative;
      overflow: hidden;
}
.mainContentProjectPage {
      float: left;
      background-color: #F55816;
      width: 100%;
      padding-left: 24px;
}
.borderLeft {
      float: left;
      background-color: #FFF;
      width: 1.3%;
      background-attachment: scroll;
      background-image: none;
      background-repeat: repeat;
      background-position: 0px 0px;
      position: absolute;
      left: 0px;
      height: 100%;
      margin: 0;
}
.borderRight {
      background-attachment: scroll;
      background-color: #FFF;
      background-image: none;
      background-repeat: repeat;
      background-position: 0px 0px;
      width: 1.3%;
      float: left;
      position: absolute;
      right: 0px;
      height: 100%;
      margin: 0;
}

我真的不明白它是如何工作的，只是确实如此。如果有人知道更好的方法来实现相同的结果，那么我将非常感激，因为这是我网站的最后一部分。我的问题是，是否有人知道如何摆脱Firefox右侧边框上的额外1个像素？它在Safari和Chrome中看起来很完美。任何帮助和建议都将是一个救生员。

JSFiddle of code above

Answer 1

删除所有额外的与边界相关的代码（即，从标记和css中删除borderLeft和borderRight div），然后将以下css应用于projectPageWrapper div。

#projectPageWrapper { 
  border: 10px solid white;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}

Answer 2

它的工作原理是因为position样式应用于不同级别的元素。 Here是有关该主题的更多信息。

包装元素.contentAndBorders会像子元素.mainContentProjectPage那样展开。因此，100％高度（does not actually work like you think it does）绝对定位的侧面元素会扩展以填充垂直空间。

除非两侧的空间需要包含固体填充以外的其他东西，否则这可能不是可行的方法。相反，请遵循box model原则，并将border-left和border-right与padding结合使用，以获得所需的外观和布局。

如果侧面部件需要图案填充或内容，那么您可以使用绝对定位的解决方案，但是大部分浮动都是不必要的，并且可能会导致更多问题而不是它们的价值。

尝试：

.contentAndBorders {
      width: 950px;
      position: relative;
}
.mainContentProjectPage {
      background-color: #F55816;
      margin: 0 1.3%;
      padding: 10px;
}
.borderLeft, .borderRight{
      background-color: #FFF;
      width: 1.3%;
      position: absolute;
      top:0px;
      height: 100%; /* note that in non-webkit browsers this may actually represent the WIDTH of the parent element */
}
.borderLeft {
      left: 0px;
}
.borderRight {
      right: 0px;
}

现在，因为浏览器并不总是知道当1.3％没有划分为偶数像素时该怎么做，所以可能会有轻微的差异。

如何摆脱Firefox添加到div的1px宽度？

2 个答案: