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

时间：2012-10-13 21:12:16

标签： jquery html css

更新： 我向任何可以帮助我实现this design的人奖励50美元。

所以我一直在尝试过去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-->

3 个答案:

答案 0 :(得分：2)

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

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

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

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

  

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

答案 1 :(得分：1)

我已经为您做了一些简单的调整，据我所知，它可以根据您在问题中附加的图片进行调整。请参阅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确保它远离左侧区域。你可能想要调整它。

答案 2 :(得分：0)

以下是我尝试实现此操作的方法。我正在使用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);
});
相关问题
最新问题