Можно ли сделать div 50px менее 100% в CSS3?

Ответ 1

Да, вы можете. Без использования 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

Ответ 2

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

div{
    margin-right:50px;
}

Отметьте fiddle

Ответ 3

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

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

fiddle

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

Ответ 4

Мое решение работает с 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

Ответ 5

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>

Ответ 6

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

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

Спасибо