css3 min-max ширина при уменьшении страниц - PullRequest
Новая
       26

css3 min-max ширина при уменьшении страниц

3 голосов
/ 14 ноября 2011

Хорошего вам дня.Я работаю над веб-страницей, но застрял в определении максимальной и минимальной ширины.По сути, я бы хотел, чтобы моя страница была в центре при масштабировании веб-страниц, как это делает большинство веб-страниц.Пожалуйста, нужна помощь эксперта. ASAP спасибо. 

body
{
  height:100%;
  width:100%;

  margin:0 auto; 
  background-image: -webkit-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: -moz-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: linear-gradient(top, #E5E5E5 30%, #999);

}

#mainContainer
{
background-image:url(bg3.jpg);
background-repeat:repeat;
background-color:#999;
width:70%; /*default width in percent for a liquid layout.
the problem is when I zoom out the page the width remains to be in 70% therefore forcing the contents to be pushed to the left corner instead of being centered.*/
min-width:940px; 
margin:5px auto;
height:100%; 
padding:0 1% 0 1%; 
-webkit-border-radius: 10px;
border-radius: 10px;
}

Ответы [ 2 ]

1 голос
/ 18 ноября 2011

в основном это может быть достигнуто только через скрипт.

Получите 70% ширины экрана браузера. Преобразуйте эту ширину в соответствующее значение px Установите максимальную ширину #mainContainer, используя значение, полученное из преобразования / расчета. 

$( document ).ready( function(){
setMaxWidth();

function setMaxWidth() {
$( "#mainContainer" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}

});

- спасибо Esailija ссылка

0 голосов
/ 14 ноября 2011

Это сосредоточено для меня. Но есть ряд потенциальных проблем:

  1. Чтобы применить высоту 100% к #mainContainer, вам нужно применить высоту не только к телу, но и к html.
  2. Также вам нужно очистить отступы и поля для html и body, или они добавят свитки.
  3. Вы не можете сделать поля для контейнера с высотой 100%, иначе они добавят свитки на страницу. Я эмулирую их с заполнением тела и "box-sizing: border-box;", но в старых IE это не будет работать правильно, поэтому вам понадобится взломать их.
  4. Также вам лучше изменить высоту на минимальную высоту, иначе она станет грязной, тогда внутри # mainContainer будет много контента.

Исправлено здесь: http://jsfiddle.net/WLPGE/1/

...