为什么这个CSS Full Height Layout没有正确显示？

Question

更新 ：我正在向任何可以帮助我实现此设计的人颁发50美元的奖励。

---

所以我一直在尝试过去2-3小时来解决这个问题，但似乎无法做到这一点。 也许有CSS或jquery经验的人可以帮助我。 我正在努力实现这一目标 。 这是我的结果 。 问题是，当我调整浏览器窗口，B列的内容都被切断，有A列的左侧有一个额外的空白这里是我的意思的截图 ，以节省您的时间。

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％。 ，但在这些内部，你有绝对的宽度值（365px和665px）。因为你的截图分辨率是1,076px×784px，这意味着你的右列，＃public .right，切割宽度约为600 + - px，但是你的内部宽度为665px。几乎可以肯定会溢出你的包裹对象。为失控的文本创建有效的空间。 对于你溢出的文本问题，我会在那里寻找问题。

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

但正如我所说，我不能复制相同的结果。所以，如果修修不解决你的问题，请随时提出更多问题。

编辑：你的右侧问题，即使你支持1030px宽度你的

最小宽度：1050;

您的

公众

从最高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;
 }

Answer 2

我已经为你做了一些简单的调整，据我所知，它可以根据你在问题中附加的图像进行调整。 见http://joshdavenport.co.uk/staging/swd/ 。

不同之处是：

#public #container {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;

    min-width: 960px;
}

这种min-width调整可以在缩小页面大小时使设计更紧凑。

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

    width: 510px;
    padding: 10px 40px;

}

此处的width确保此元素始终保持相同的宽度，并且padding确保其远离左侧区域。 你可能想要调整它。

Answer 3

以下是我尝试实现此操作的方法。 我正在使用jQuery设置左右高度。 我还调整了一些标记，使用ID而不是左右等元素的类，因此jQuery选择器会更快。

CSS：

    /* apply a natural box layout model to all elements */
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    html,
    body
    {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
    #public
    {
        width:100%;
        height:100%;
    }

    #public #container
    {
        min-width:1050px;
    }

    #public #left
    {
        float:left;
        width:40%;
    }

    #public #left .content
    {
        margin-top:20px;
        width:365px;
        float:right;
    }

    #public #left #logo img
    {
        max-width:100%;
        background-color:#e5e5e5;
    }

    #public #left #platforms
    {
        background-color:#888;
        height:30px;
    }

    #public #right
    {
        float:left;
        width:60%;
        background-image:url(images/bg_public.jpg);
    }

    #public #right .content
    {
        height:100%;
        padding:20px;
        background:url(images/public-right-shadow.png) no-repeat left top;
    }

HTML：

<div id="public">
  <div id="container">
    <div id="left">
      <div class="content">
        <div id="logo"><img src="images/logo2.png" alt="" /></div>
        <div id="platforms"><img src="images/supported-platforms.png" /></div>
        <div id="copy">&copy; all right reserved 2012</div>
      </div>
    </div><!--.left-->
    <div id="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-->

jQuery的：

$(document).ready(function(){
    var WindowResize = function(){
        var WindowHeight = $(window).height();
        $('#left, #right').css('height', WindowHeight);

    }

    WindowResize();
    $(window).bind('resize', WindowResize);
});