CSS布局缩放问题答案

【问题标题】：CSS layout zoom issueCSS布局缩放问题
【发布时间】：2012-09-06 13:08:44
【问题描述】：

我的问题是，当我放大或缩小页面时（在我尝试过的所有浏览器中），只有部分页面显示为缩放（div 中的内容，而不是 div 本身）。我设置了边框以方便显示。

当我搜索解决方案时，他们都提到这是因为使用像素 (px) 的固定宽度值。因此，我在将值设置为宽度和高度时使用了%；但是，问题仍然存在......

这里有一些截图来说明我的问题：

放大时：

缩小时：

这是我的代码：

HTML：

<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div id="title_bar">
            some txt here
            <div id="title_img"></div>

            <div id="title_txt"></div>

            <div id="menu_navigation"></div>
        </div>

        <div id="title_bar_2">
            some txt here
        </div>

        <div id="container_columns">
            <div id="column_1">
                <span id="column_1_content">some txt here</span>
            </div>
            <div id="column_2">
                <span id="column_2_content">some txt here</span>
            </div>
        </div>
    </body>
</html>

CSS：

html body
{
    margin: 0;
    width: 100%;
    height: 100%;
    background-color:#f2f2f2;
}

div#title_bar
{
    height:4%;
    width:76%;
    margin:auto;
    margin-top:4%;
    border-style:solid;
    border-color:blue;
}

div#title_bar_2
{
    text-align:center;
    height:44%;
    width:76%;
    margin:auto;
    margin-top:2%;
    border-style:solid;
    border-color:blue;
}

div#title_bar img
{
    margin-top:1%;
    float:left;
}

div#title_txt
{
    float:left;
    margin-left:2%;
    margin-top:1.4%;
    font-style: italic;
    font-family:verdana;
    font-size: 16px;
}

div#menu_navigation
{
    float:left;
    margin-left:35%;
    margin-top:1.4%;
    font-size:19px;
}

div#container_columns
{
    margin:auto;
    width:76.5%;
    margin-top:2%;
    height:27%;
    border-style:solid;
    border-color:blue;
}

div#column_1
{
    height:100%;
    width:49%;
    float:left;
    border-style:solid;
    border-color:blue;
}

div#column_2
{
    margin-left:1%;
    width:48%;
    float:left;
    height:100%;
}

【问题讨论】：

标签： css zooming

【解决方案1】：

您好，这是因为您正在使用属性高度。如果你想要这个属性，尽量不要使用它。

html body{
margin: 0;
width: 100%;
background-color:#f2f2f2;}

div#title_bar{
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;}


div#title_bar_2{
text-align:center;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;}

div#title_bar img{
margin-top:1%;
float:left;}


div#title_txt{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;}

div#menu_navigation{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;}

div#container_columns{
margin:auto;
width:76.5%;
margin-top:2%;
border-style:solid;
border-color:blue;
display:block;}

div#column_1{
width:48%;
float:left;
border-style:solid;
border-color:blue;}

div#column_2{
margin-left:1%;
width:48%;
float:left;}

【讨论】：

好的，谢谢！但我应该使用假柱或其他东西来修复它而不是高度？
对不起最后一个问题，我检查并在添加新内容时自动填充 div :) 再次感谢