Интересная вещь))

demi · June 16, 2011

Игрался с вёрсткой и решил попробывать может ли СSS отнимать от 100% какие либо число. Оказалось что не может но тем не мение если поставить после 100% знак минус, тоесть так

width:100%-;

то получаеться очень забавная вещь.

Насколько я понял оно от 100% отнимает величину падинга.

Кто может обьяснить более детально?

P.S. Гуглил и не нашол.

Vlad · June 17, 2011

CSS3 может вычислять значения, например

width: calc(100% - 50px);

Работает в Fx4 и в IE9 (как ни странно).

ctpz · June 17, 2011

Инетресно, а я не знал

amelice · June 17, 2011

а можно писать разные единицы размерности, как приведено в коде в этой теме?

Great Rash · June 17, 2011

Тьфу блин, повелся я :lol:

Просто свойство width перестает работать, а т.к. элемент изначально блочный, то у него высчитывается авто-ширина. Нет тут никакой магии. Чудес не бывает, а жаль.

Edited June 17, 2011 by Great Rash

psywalker · June 17, 2011

А я кстати давно уже эту вещицу приметил. Да, полезная штука, вот вам пример для наглядности:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>

        <style type="text/css">
		* { padding: 0; margin: 0;}
.calc {

	height: 100px;
	border: 1px solid #f00;

	background: red;

	/* Firefox */
	width: -moz-calc(100% - 100px);
	/* WebKit */
	width: -webkit-calc(75% - 100px);
	/* Opera */
	width: -o-calc(75% - 100px);
	/* Standard */
	width: calc(75% - 100px);
}
.wrap { background: blue; width: 100px;}
        </style>
</head>
<body>
<div class="calc"> I have a dynamic width </div>
<div class="wrap"> I have a dynamic width </div>     

</body>
</html>

Great Rash · June 17, 2011

Тока в ИЕ не пашет, а так все круто конечно...

psywalker · June 17, 2011

Тока в ИЕ не пашет, а так все круто конечно...

Как не пашет? В ИЕ9 вроде должен? :unsure:

Вот переделал пример, у меня пашет в ИЕ9

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>

        <style type="text/css">
		* { padding: 0; margin: 0;}
.calc {

	height: 100px;
	border: 1px solid #f00;

	background: red;

	/* Firefox */
	width: -moz-calc(100% - 100px);
	/* WebKit */
	width: -webkit-calc(100% - 100px);
	/* Opera */
	width: -o-calc(100% - 100px);

	/* Standard */
	width: calc(100% - 100px);
}
.wrap { background: blue; width: 100px;}
        </style>
</head>
<body>
<div class="calc"> I have a dynamic width </div>
<div class="wrap"> I have a dynamic width </div>     
</body>
</html>

Great Rash · June 17, 2011

Ну кроме 9 еще ИЕ имеются

Да и там не уверен...

psywalker · June 17, 2011

Ну кроме 9 еще ИЕ имеются
Да и там не уверен...

Не, не, пашет, пашет. Сверху пример сделал, везде одинаково.

amelice · June 17, 2011

У меня IE8, к сожалению не работает. div.calc растягивается на все окна просмотра.(

Но за фичу спасибо, я беру в архив.

psywalker · June 17, 2011

У меня IE8, к сожалению не работает. div.calc растягивается на все окна просмотра.(
Но за фичу спасибо, я беру в архив.

Чебурек, да пока рано брать ещё, на дворе ИЕ6-8 ещё живы и будут жить ещё лет 7 точно :facepalmxd:

amelice · June 17, 2011

Чебурек, да пока рано брать ещё, на дворе ИЕ6-8 ещё живы и будут жить ещё лет 7 точно

Смайлик в тему Зато буду знать что есть такая фича. В архиве как раз место.

DasBit · June 17, 2011

У меня IE8, к сожалению не работает. div.calc растягивается на все окна просмотра.(
Но за фичу спасибо, я беру в архив.
Чебурек, да пока рано брать ещё, на дворе ИЕ6-8 ещё живы и будут жить ещё лет 7 точно

IE6 думаю точно столько не протянет :rolleyes: а там...мало ли

demi · June 17, 2011

Вот подстава(( что я совсем не додумался что просто свойсова width перестаёт работать((

а было б круто)

Sign In

Интересная вещь))

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information