缩放页面（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 元素的字体大小设置为 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;
}

由于内容列和右列之间的 10 像素间距
缩放时模板不会折叠。

请评论我的解决方案。

感谢大家的参与。