CSS布局缩放问题

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

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

以下是一些屏幕截图来说明我的问题:

放大时:

zoomed-in

缩小时:

zoomed-out

这是我的代码:

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%;
}

最佳答案

嗨，发生这种情况是因为您正在使用属性高度。如果您想要此属性，请尽量不要使用它。

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

关于CSS布局缩放问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12300851/

CSS布局缩放问题

上一篇：php - 开源 CSS 文件生成器

下一篇：css - 表单样式垂直对齐