CSS布局缩放问题

我的问题是，当我放大或缩小页面时（在我尝试的所有浏览器中），只有一部分显示为缩放（div中的内容，而不是divs自己）。我把边界很容易地展现出来。CSS布局缩放问题

当我搜索一个解决方案时，他们都提到，这是因为使用像素（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%; 
}

来源

2012-09-06 user1652000

你好，这是发生，因为你使用的是财产的高度。尽量不要使用它，如果你想要这个属性。

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-06 13:38:06 andres83

好的谢谢你做到了！但是不应该使用人造色彩或其他东西来修复它？ – user1652000

对于最后一个问题感到抱歉，我检查并添加新内容时div会自动填充:)再次感谢 – user1652000

CSS布局缩放问题

回答

相关问题