2

私の問題は、ページをズームインまたはズームアウトすると（試したす​​べてのブラウザーで）、ページの一部のみがズームとして表示されることです（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%;
}
4

1 に答える 1

2

こんにちはこれは、プロパティの高さを使用しているために発生しています。このプロパティが必要な場合は、使用しないようにしてください。

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;}
于 2012-09-06T13:38:06.137 に答える