jquery - 为什么这个 CSS 全高布局显示不正确？

Question

更新:我将奖励 50 给任何能帮助我实现目标的人 this design .

---

因此，在过去的 2-3 个小时里，我一直在尝试解决此问题，但似乎无法解决。也许有 CSS 或 jquery 经验的人可以帮助我。我正在尝试 accomplish this .这是 my result .问题是当我调整浏览器窗口大小时，B 列的内容被截断并且 A 列左侧有一个额外的空白区域。Here's a screenshot of what I mean为您节省时间。

CSS:

#public {
  width:100%;
}
#public #container {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  min-width:1050px;
}
#public .left {
  float:left;
  width:40%;
  height:100%;
  background-color:#fff;
}
#public .left .content {
  float:right;
  width:365px;
  margin-top:20px;
  text-align:center;
}
#public .left .platforms {
  margin-top:40px;
}
#public .left .aila {
  display:block;
  margin-top:25px;
}
#public .left .copy {
  margin-top:20px;
  color:#171515;
  font:bold 12px Arial, Verdana;
}
#public .right {
  float:right;
  width:60%;
  height:100%;
  overflow:hidden;
}
#public .right .content {
  float:left;
  width:665px;
  min-height:704px;
  margin-top:20px;
  background:url(images/public-right-shadow.png) no-repeat left top;
}

HTML:

<div id="public">
  <div id="container">
    <div class="left">
      <div class="content">
        <img src="images/logo2.png" alt="" class="logo" />
        <img src="images/supported-platforms.png" class="platforms" />
        <div class="copy">&copy; all right reserved 2012</div>
      </div>
    </div><!--.left-->
    <div class="right">
      <div class="content">
      Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. 
      </div>
    </div><!--.right-->
  </div><!--#container-->
</div><!--#public-->

Answer 1

我似乎没有复制相同的输出，但是，对我来说，你的问题似乎出在你的内容类对象的那些宽度值上。你有两个相对大小的对象，具体值是你的 40% 和 60% window size.,but inside these , You have absolute width values (365px and 665px). 因为你的屏幕截图分辨率是 1,076px × 784px,这意味着你的右栏，#public .right，被剪掉了大约 600+- px 的宽度，但是你在里面放了 665px 的宽度。这几乎肯定会溢出你的包装对象。因此为失控的文本创造了有效的空间。对于您溢出的文本问题，我会在那里寻找问题。

现在对于#public .left 左侧的额外空间，这可能是因为您将其内容 float 到右侧。

但正如我所说，我无法复制相同的结果。因此，如果修改不能解决您的问题，请随时提出更多问题。

编辑:对于您的右侧问题，即使您支持 1030px 宽度

min-width:1050;

你的

public .right

从最大 630 处获取，但你试图适应 665px

此代码应该可以解决您的问题

#public .right .content {
  /* change padding value to whatever feels right */
padding-right: 10px;
float:left;
 /* this loses the fixed size though */
width:100%;
min-height:704px;
margin-top:20px;
background:url(images/public-right-shadow.png) no-repeat left top;
 }