zoom-in? содержание! = 100%

я застрял с проблемой в одном из моих проектов ...zoom-in? содержание! = 100%

По умолчанию моего содержания контейнер 100%, но когда я зум в контейнере становится меньше, чем 100%

первая IMG:

normal zoom

второй IMG:

zoomed in

Вот мой HTML файл

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <link href="style.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div class="body_wrap"> 
      <header> 
       <!-- content --> 
      </header> 

      <section class="main"> 
       <div class="content_wrapper"> 
        <div class="content clearfix"> 
         <!-- content --> 
        </div> 
       </div> 
      </section> 
     </div> 
    </body> 
</html>

и CSS

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    outline: none; 
} 
html { height: 100% } 
body { font-size: 62.5%; line-height: 1 } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
ol, ul { list-style: none } 
a { text-decoration: none; } 

::-moz-selection {background:#E92C6C; color:#fff; text-shadow: 0 1px rgba(0, 0, 0, .2);} 
::selection {background:#E92C6C; color:#fff; text-shadow: 0 1px rgba(0, 0, 0, .2);} 
*, textarea:focus, input:focus { outline: none; } 
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden} 

body { 
    background: #FF0000 url('http://wallpapers.wallbase.cc/rozne/wallpaper-3027963.jpg') no-repeat 50% 0%; 
    background-size: 100%; 
    font-family: "Lato", Arial, "Lucida Grande", sans-serif; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
} 

header { 
    position: relative; 
    width: 960px; 
    height: 700px; 
    margin: 0 auto; 
    padding: 0; 
} 

section.main {position: relative;width: 100%;background: #FFF;z-index: 5;min-height: 890px;} 
section.main .content_wrapper { 
    position: absolute; 
    margin: 0 auto; 
    width: 100%; 
    background: url('http://www.7image.ru/pics/1113/406472675.png') repeat-x; 
    top: -10px; 
} 
section.main .content_wrapper .content { 
    position: relative; 
    width: 960px; 
    padding: 20px 0; 
    margin: 0 auto; 
}

Заранее спасибо

источник

2013-11-20 user3015012

У вас есть header набор для width: 960px. Это приводит к тому, что страница увеличивается по горизонтали, когда вы увеличиваете масштаб, а ширина экрана становится меньше 960px. Установите body-wrap div на overflow: hidden, так что ваш header уже не overflows ваш body-wrap.

источник

2013-11-20 21:28:53 MattDiamant

Я не возражаю, если появляется полоса прокрутки ... моя проблема - это контейнер, когда он становится меньше 100% – user3015012

Контейнер по-прежнему 100%, 100% ширины окна. Если вы хотите, чтобы это было 100% документа, оберните все в div с положением: relative; должен решить эту проблему. – Last1Here

Вместо использования

section.main .content_wrapper { 
    width: 100%; 
}

Как об использовании:

section.main .content_wrapper { 
    width: inherit; 
}

Это помогло мне много моих проектов, поможет вам тоже.

источник

2013-11-20 21:29:08

nop, все тот же результат .. спасибо в любом случае – user3015012

zoom-in? содержание! = 100%

ответ

Смежные вопросы