我的问题是,当我放大或缩小页面时(在我尝试过的所有浏览器中),只有部分页面显示为缩放(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%;
}