Можно ли сделать div 50px менее 100% в CSS3? [Дубликат]

Question

Можно ли сделать div 50px менее 100% в CSS3? [Дубликат]

218

Можно ли сделать div 50px менее 100% в чистом CSS? Я хочу, чтобы <div> составлял всего 50 пикселей меньше 100%. Мне не нужен JavaScript.

Derek 朕會功夫 19 июнь 2012, в 04:10

Источник

1

@hakre - Ваша ссылка в CSS, и это в CSS3.
Derek 朕會功夫 26 июнь 2012, в 20:28
2

как CSS не CSS3 не CSS не CSS3 не CSS не ...? Если вы явно запрашиваете функцию CSS, которая была сформулирована только в версии 3, пожалуйста, попросите ее (не CSS вообще - да, ваше тело вопроса отличается от его названия здесь, так что не вините меня;))
hakre 26 июнь 2012, в 23:28
0

Хорошо взгляните на тело под заголовком вопроса. Вы должны использовать тело, чтобы сделать вопрос CSS3 явным (и пока мы говорим, скажите, если CSS3 или CSS3 +)
hakre 26 июнь 2012, в 23:31
0

@hakre: Согласен с тобой - единственный след «CSS3» в исходном вопросе был в тегах. Если бы я видел этот вопрос в то время, когда его задавали, я бы удалил тег, потому что CSS3 действительно является CSS. Это не какой-то совершенно отдельный и другой язык, хотя он выходит далеко за пределы того, что возможно в CSS2 (так называемый «CSS»). Но поскольку изменения ясно показали, что это вопрос CSS3, требующий ответа CSS3, я думаю, мы можем оставить все как есть ...
BoltClock♦ 06 июль 2012, в 03:41

Показать ещё 2 комментария

Теги:

html

css

css3

6 ответов

152

A DIV автоматически берет свою родительскую ширину. Поэтому нет необходимости определять width. Обычно он просто записывал бы это следующим образом:

div{
    margin-right:50px;
}

Отметьте fiddle

sandeep 19 июнь 2012, в 05:56

11

Как насчет этого против этого ?
Chango 19 июнь 2012, в 04:59
4

@Chango - это просто удивительно, когда вы изменяете размер окна.
Derek 朕會功夫 19 июнь 2012, в 04:59
1

@ Чанго может быть, что вы хотите достичь jsfiddle.net/Nw3yd/6
sandeep 19 июнь 2012, в 05:22
1

@sandeep В вашем примере оба div не имеют одинакового размера, зеленый имеет фиксированный размер, а красный имеет то, что осталось минус 200px. Ваше решение великолепно, но я нашел интересным тот конкретный вариант использования ответа Дерека.
Chango 19 июнь 2012, в 13:38

Показать ещё 2 комментария

37

Другой альтернативой является абсолютное позиционирование.

div {
    position: absolute;
    left: 0;
    right: 50px;
}

fiddle

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

gilly3 19 июнь 2012, в 06:59

7

Мое решение работает с float: left и без него.

HTML:

<div></div>

CSS

div {
    height: 20px;
    background: black;
    float: left;
    width: 100%;
    padding-right: 50px;
    box-sizing: border-box;
    background-clip: content-box; 
}

Демо

Совместимость:
Firefox 3.6, Safari 5, Chrome 6, Opera 10, IE 9

Puyol 19 июнь 2012, в 16:17

2

Элементы div в вашем методе по-прежнему занимают всю ширину экрана, поэтому, если вы поместите два из них, вы не сможете заставить их плавать рядом с другим.
Chango 19 июнь 2012, в 14:49

4

jsFiddle

Использование дисплея block и margin. display:block, если он не объединен с определенным height/width, попытается заполнить его родительским.

header {
    width:100%;
    background:#d0d0d0;
    height:100%;
}
h1 {
    display:block;
    border:#000 solid 1px;
    margin:0 50px 0 0;
    height:100px;
}
<header>
    <h1></h1>
</header>

Jason Lydon 18 апр. 2013, в 03:56

-5

Да, мы можем сделать это, сделав

#custom_div{
 width:100%;
 margin-right:50px;
 }

Спасибо

Deepranshu 19 июнь 2012, в 10:20

4

почему вы определяете ширину: авто;
sandeep 19 июнь 2012, в 12:43
9

Это тот же ответ, что и у sandeep, кроме width:auto; , который не имеет никакого эффекта. Ваш ответ не добавляет никакой ценности. Вместо того, чтобы публиковать собственную версию ответа sandeep, вы должны были проголосовать за ответ sandeep.
Erik B 19 июнь 2012, в 16:06

Ещё вопросы

как CSS не CSS3 не CSS не CSS3 не CSS не ...? Если вы явно запрашиваете функцию CSS, которая была сформулирована только в версии 3, пожалуйста, попросите ее (не CSS вообще - да, ваше тело вопроса отличается от его названия здесь, так что не вините меня;))
Хорошо взгляните на тело под заголовком вопроса. Вы должны использовать тело, чтобы сделать вопрос CSS3 явным (и пока мы говорим, скажите, если CSS3 или CSS3 +)
@hakre: Согласен с тобой - единственный след «CSS3» в исходном вопросе был в тегах. Если бы я видел этот вопрос в то время, когда его задавали, я бы удалил тег, потому что CSS3 действительно является CSS. Это не какой-то совершенно отдельный и другой язык, хотя он выходит далеко за пределы того, что возможно в CSS2 (так называемый «CSS»). Но поскольку изменения ясно показали, что это вопрос CSS3, требующий ответа CSS3, я думаю, мы можем оставить все как есть ...
@Chango - это просто удивительно, когда вы изменяете размер окна.
@ Чанго может быть, что вы хотите достичь jsfiddle.net/Nw3yd/6
@sandeep В вашем примере оба div не имеют одинакового размера, зеленый имеет фиксированный размер, а красный имеет то, что осталось минус 200px. Ваше решение великолепно, но я нашел интересным тот конкретный вариант использования ответа Дерека.
Элементы div в вашем методе по-прежнему занимают всю ширину экрана, поэтому, если вы поместите два из них, вы не сможете заставить их плавать рядом с другим.
почему вы определяете ширину: авто;
Это тот же ответ, что и у sandeep, кроме width:auto; , который не имеет никакого эффекта. Ваш ответ не добавляет никакой ценности. Вместо того, чтобы публиковать собственную версию ответа sandeep, вы должны были проголосовать за ответ sandeep.

Derek 朕會功夫 · Accepted Answer · 2012-06-19T03-19-00.000Z

271

Лучший ответ

Да, вы можете. Без использования IE expression() вы можете сделать это в CSS3, используя calc().

div {
    width: 100%;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}

Демо: http://jsfiddle.net/thirtydot/Nw3yd/66/

Это сделает вашу жизнь намного проще. В настоящее время он поддерживается в трех основных браузерах: Firefox, Google Chrome (WebKit) и IE9: http://caniuse.com/calc

MDN: https://developer.mozilla.org/en/CSS/-moz-calc

Derek 朕會功夫 19 июнь 2012, в 03:19

41

Проблемы в том, что: а) вопрос не был ясен относительно ширины и высоты, и б) ответ на вопрос не самый лучший. Для ширины лучше использовать sandeep, для высоты - gilly3. Ответ ОП не поддерживается сегодня в какой-то важной статистике браузера. (IE7 / 8)
shannon 19 июнь 2012, в 09:30
16

Кстати: без префикса версия должна идти после префиксной версии, а не до. См. Developer.mozilla.org/Writing_Forward_Compatible_Websites Также, по моему опыту, многие ситуации с calc () могут быть заменены на box-sizing .
luiscubal 19 июнь 2012, в 13:04
1

Выражение «expression ()» вызывает проблемы, поскольку браузер пересчитывает функции (внутри выражений) для каждого пикселя движения мыши, это влияет на использование процессора. И в этом случае (с calc) это происходит?
19WAS85 19 июнь 2012, в 18:30
1

@bfrohs - для IE 6/7 вы можете использовать expression() .
Derek 朕會功夫 19 июнь 2012, в 19:05
2

Я должен сказать, что для большинства сайтов использование calc() для чего-то важного - плохая идея. Поддержка браузера не достаточно хороша.
thirtydot 20 июнь 2012, в 00:11
5

Обратите внимание, что этот вопрос относится только к CSS3 и имеет специальный ответ для CSS3, так что это не обман для других, которые были рекомендованы, которые были только для предыдущих версий.
casperOne 21 июнь 2012, в 15:06

Показать ещё 4 комментария