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

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-->

score 2 · Accepted Answer

我似乎没有复制相同的输出，但是，对我来说，您的问题似乎在于您的内容类对象的宽度值。您有两个相对大小的对象，具体值是您的窗口大小的 40% 和 60%。，但是在这些里面，你有绝对宽度值（365px 和 665px）。因为你的截图分辨率是 1076px × 784px，这意味着你的右列，#public .right，被切割成大约 600+- px 的宽度，但是您在其中放置了 665px 宽度。这几乎肯定会溢出您的包装对象。因此为失控的文本创建有效空间。对于您溢出的文本问题，我会在那里寻找问题。

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

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

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

最小宽度：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;
 }

score 1 · Accepted Answer

我已经为您做了一些简单的调整，据我所知，它按照您在问题中附加的图像工作。请参阅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确保它远离左侧区域。您可能需要对此进行调整。

score 0 · Accepted Answer

这是我可能尝试实现的方法。我正在使用 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);
});

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

3 回答 3

Related

Reference