Как я могу сделать ширину = 100% - 100 пикселей в CSS?

Question

В CSS, как я могу сделать что-то вроде этого:

width: 100% - 100px;

Полагаю, это довольно просто, но немного трудно найти примеры, показывающие это.

Answer 1

Не могли бы вы сделать:

margin-right: 50px;
margin-left: 50px;

Редактировать: Мое решение неверно. Решение, опубликованное Ариком Тенейком (Aric TenEyck), предлагающее использовать div с шириной 100%, а затем вкладывать другой div с использованием полей, кажется более правильным.

Answer 2

Это работает:

margin-right:100px;
width:auto;

Answer 3

Вы можете использовать LESS , который представляет собой файл JavaScript, который предварительно обрабатывает ваш CSS, чтобы вы могли включать логику и переменные в свой CSS. Итак, для вашего примера, в LESS вы бы написали width: 100% - 100px;, чтобы достичь именно того, что вы хотели:)

Answer 4

Вы не можете.

Однако вы можете использовать поля для достижения того же результата.

Answer 5

<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>

Answer 6

CSS нельзя использовать для анимации или любых изменений стиля событий.

Единственный способ - использовать функцию javascript, которая будет возвращать ширину данного элемента, затем вычесть ему 100px и установить новый размер ширины.

Если вы используете jQuery, вы можете сделать что-то вроде этого:

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

И с нативным JavaScript:

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

Мы предполагаем, что у вас есть стиль CSS, установленный на 100%;

Answer 7

Вы используете стандартный режим? Это решение зависит от этого, я думаю.

Если вы пытаетесь создать 2 столбца, вы можете сделать что-то вроде этого:

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

Затем используйте CSS для стилизации:

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

Если вам не нужны 2 столбца, вы можете удалить <div id="left">

Answer 8

Краткий ответ: НЕ делайте этого в CSS. В Internet Explorer есть поддержка CSS Expressions, но она не является стандартной и определенно не поддерживается другими браузерами, например, FireFox.

Тебе лучше сделать это на JavaScript.