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佈局縮放問題

回答

相關問題