缩放页面(ctr+ ctr-)，折叠模板

Question

我有固定宽度的三列的页面布局。请参阅以下HTML和CSS代码片段

在某些分辨率下，显示器(特别是在firefox中)，当我缩放页面(CTR-)时，模板页面正在折叠。我找不到解决这个问题的办法。

作为替代，我将div.right-wrapper和div.right-column的宽度减少为1 px。但这并不完全符合规范。

有没有人有主意？谢谢。

<div class="main_content three-column">
      <div class="main_content_inner">
         <div class="left-column">
            <h1>Left column</h1>
         </div>
         <div class="right-wrapper">
            <div class="content-column">
               <h1>Content column</h1>
            </div>
            <div class="right-column">
               <h1>Right column</h1>
            </div>
            <div class="clr"></div>
         </div>
         <div class="clr"></div>
   </div>
</div>



.main_content.three-column {
    background: #fff;
    width: 998px;
    margin: 0 auto;
}

.main_content.three-column .main_content_inner {
    padding: 0 10px;
}

.left-column { 
    width: 199px;
    padding: 15px 10px 15px 0;  
    border-right: 1px solid #e8eaec;
    float: left; 
    background: red;
}

.right-wrapper { 
    width: 768px; 
    border-left: 1px solid #e8eaec;
    margin-left: -1px;  
    float: left;
}

.content-column {
    width: 558px;
    float: left;
    padding: 15px 10px;
    background: green;
}

.right-column {
   width: 190px;
   float: left;
   padding: 15px 0 15px 0;
   overflow: hidden;
   background: blue;
}

.clr {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

.main_content.three-column h1 {
    font: normal 24px/12px Arial, Tahoma, sans-serif;
    color: #fff;    
    margin: 5px;
}

Answer 1

如果想要缩放布局，请使用相对尺寸(如em或ex )，而不是绝对尺寸(如px )。

我建议将html元素的font-size设置为10px，这样在更改字体大小之前，到处都是1em = 10px：

html {font-size: 10px}

如果您希望div为993px，只需将其设置为99.3em即可。现在，您的布局将缩放。

Answer 2

我找到了针对特定情况的下一个最优解决方案。

1)移除块右包装器

2)添加了块的样式

div.content-column {
   border-left: 1px solid #e8eaec;
   margin-left: -1px;
   padding-right: 0;
}

3)添加了块的样式

div.right-column {
   float: right;
}

我设置了块的下一个宽度：

div.left-column {
   border-right: 1px solid #E8EAEC;
   float: left;
   padding: 15px 10px 15px 0;
   width: 199px;
}

div.content-column {
   border-left: 1px solid #E8EAEC;
   float: left;
   margin-left: -1px;
   padding: 15px 0 15px 10px;
   width: 558px;
}

div.right-column {
   float: right;
   overflow: hidden;
   width: 190px;
}

由于content-column和right-column之间有10个像素的间距

 template is not collapsing when zooming.

请评论我的解决方案。

感谢大家的参与。