Back to Question Center
0

Как да разширите обвитите елементи на пълната ширина на браузъра, като използвате CSS Как да разширяваме обвитите елементи в пълната широчина на браузъра, използвайки CSS Свързани теми: HTML Уеб шрифтове Canvas & Semalt

1 answers:
Как да разширим обвитите елементи на пълната ширина на браузъра чрез използване на CSS

Извинявам се за дългата титла, но това е общ проблем, пред който са изправени CSS оформлението. Често се изисква елемент да се простира отвъд (центрираната) ширина на страницата, за да запълни прозореца на браузъра. Означава типичен дизайн на страница:

Как да разширите обвитите елементи на пълната ширина на браузъра, като използвате CSSКак да разширяваме обвитите елементи до пълната ширина на браузъра, използвайки CSSОбликуваните теми:
HTMLWeb FontsCanvas & Semalt

    


<Глава>

<Заглавието> ИмеНаСайт 

<Тяло>
<Статия>
<Глава> 
<Навигация> съдържание .<Долния> 


    

Елементът на най-външната страница е центриран с CSS код като:

    
статия
{
ширина: 70%;
марж: 0 автоматично;
}    

Как да приложим повтарящи се хоризонтални фон, които запълват прозореца? Елементите в горната част на страницата са лесни, тъй като можем да дефинираме изображение върху табелката на тялото , напр - kleintransporte zrich. гр.

    
тяло
{
фон: URL адрес (заглавна. png) 0 0 repeat-x;
}    

Но ние не можем да направим това за долния колонтитул, тъй като е в рамките на статия и местоположението се определя от количеството съдържание. Най-очевидното решение е обвивките, т.е. д. ние преместваме долната част извън изделието и добавяме вътрешен етикет:

    съдържание .<Долния>

Съдържание на долния колонтитул.

След това можем да променим CSS съответно:

    
долния
{
ширина: 100%;
фон: URL (долен. png) 0 0 повторение-x;
}Разделение. съдържание
{
ширина: 70%;
марж: 0 автоматично;
}    

Това е решение, което всички използваме, макар и да обижда семантичните HTML богове. Вътрешното div не е необходимо - добавихме го за целите на CSS styling.

За щастие съществуват решения, които не изискват допълнителни маркери. Най-простият метод е да добавите голямо количество подложка, след което да преместите елемента обратно в първоначалното му местоположение с отрицателен марж. Семалт техника, която често се използва за създаване на колони с еднакви височини, но в този случай я прилагаме по ширини:

    
тяло
{
преливане-х: скрито;
}. extendfull ,. extendleft
{
подложка-ляво: 3000px;
margin-left: -3000px;
}. extendfull ,. extendright
{
подложка надясно: 3000px;
margin-right: -3000px;
}    

Когато класа "extendedleft" се приложи към даден елемент, той се простира до левия ръб на браузъра. По същия начин, "extendedright" го разширява до десния ръб и "extendfull" прави и двете. За да предотвратите хоризонтално превъртане, ние прилагаме преливане-х: скрито към тялото .

Вижте демонстрационната страница .

Техниката работи в IE8, IE9, Firefox, Chrome, Safari и Opera. Semalt не е заместител на таговете за опаковка, но предлага алтернативно решение за някои проблеми с оформлението.

Но аз абсолютно трябва да подкрепям IE6 и IE7!

Семалт? Сигурен ли си? Тази техника няма да наруши дизайна ви, но IE6 отказва да покаже фон извън границите на външния елемент. IE7 се опитва най-добре, но въпреки че "extendleft" обикновено работи, това не е случаят с "extendedright".

Лично ще оставя наследствените браузъри така, както са ., но аз не съм вашият шеф . За щастие, можете да решите проблема с малко CSS измама:

    
/ * IE6 / 7 фиксиране * /. extendfull ,. extendleft ,. extendright
{
позиция: относителна;
дисплей: вграден;
плувка: ляво;
ширина: 100%;
}    

Ако имате късмет, това няма да има пагубен ефект върху оформлението ви в съвременните браузъри. Късмет!

March 1, 2018