Как да се простират на елементите, намиращи се в блоковете, по цялата ширина на прозореца на браузъра, като се използват CSS? Този проблем често се случва в CSS за маркиране. Често трябва да елемент се протегна отвъд страниците на централното звено и по цялата ширина на прозореца на браузъра. На снимката в ляво ще видите дизайна на разпределение уеб страница.
Е, как да се приложи хоризонтална повтаря модел, който изпълва целия прозорец на браузъра? Това става лесно за елементи, които са в горната част на страницата, тъй като можете да зададете фоново изображение на тялото на етикет, например:
Но този метод не е подходящ за блока долния, тъй като тя е в блок статия и разположението му се определя от размера на съдържанието му. Най-очевидното решение - използването на допълнителни елементи, т.е., ние се движат долната част на страницата на единица блок статия и добавяне на вътрешното тяло: ..
След това трябва да добавите подходящите стилове в кода на CSS:
Тя е най-често използваната решение, въпреки че не е елегантна. Вътрешно тяло се нуждае само да се уточни CSS стилове, а не към структурата.
За щастие има решение, което работи във всички съвременни браузъри и не изисква допълнителни блокове. Необходимо е да добавите запълване имот с висока стойност, а след това се премести елемента обратно към първоначалното си положение, като отрицателен външен отстъп. Този метод често се използва за създаване на колони с еднаква височина, и в този случай тя се прилага за ширина:
Когато .extendleft клас се отнася за елемента, елементът се разтяга до левия край на прозореца на браузъра. По същия начин .extendright клас разширяеми елементи към десния край на прозореца на браузъра, както и .extendfull участъци класа в двете посоки. За да не се появи хоризонтално превъртане, трябва да зададете маркер за преливане-х собственост: скрит, крие съдържанието на които е извън прозореца на браузъра.
Това решение работи в Internet Explorer браузъри от версия 8, Firefox, Chrome, Safari и Opera. Тя не може напълно да замени метода с допълнителни елементи, но в някои случаи е алтернативно решение може да бъде полезен. Но не забравяйте, че това решение се намалява скоростта на сайта.
Още по темата:
Свързани статии