Как я могу сделать ширину = 100%

153

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

width: 100% - 100px;

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

html css

— fmsf
источник

1

Связанный вопрос stackoverflow.com/questions/11093943/… дает интересный, но не полностью обратно совместимый ответ, может быть, вы хотели бы взглянуть на это тоже.

— 11684

5

Для тех, кто пересекает этот вопрос, Чад ответил, что современные браузеры поддерживают width: calc(100% - 100px);несколько ответов, и я надеюсь, что задающий вопрос обновит его вопрос :) :)

— Anders M.

278

Современные браузеры теперь поддерживают:

width: calc(100% - 100px);

Чтобы просмотреть список поддерживаемых версий браузера, проверьте: Могу ли я использовать calc () в качестве значения модуля CSS?

Существует откат jQuery: css width: calc (100% -100px); альтернатива с использованием jquery

— Чад
источник

13

Я обнаружил, что когда я использовал, calc(100% - 6px)например, это отображалось как calc(94%), я должен был избежать его следующим образом, и теперь это работаетwidth: calc(~"100% - 6px");

— nsilva

12

Имейте в виду, у вас должен быть пробел вокруг -(или +) символа. Это работает: calc(100% - 100px); И это не делает:calc(100%-100px);

— freefaller

Я немного удивлен, что нет возможности автоматически вычесть 2x отступа элемента, что обычно является довольно распространенным вариантом использования. Например, мне в конечном итоге padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);придется сделать , и мне придется изменить 0.25emв двух местах сейчас, если он должен быть изменен.

— CNST

Огромное спасибо, также хотел бы отметить, что это работает для сложения: (100% + 100px)

— Виктор Меллгрен

99

Не могли бы вы вложить div с margin-left: 50px;и margin-right: 50px;внутри <div>с width: 100%;?

— Aric TenEyck
источник

4

ширина: calc (100% - 100px); Это правильный ответ.

— Sushan

17

Вы можете попробовать это ...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

Развернуть фрагмент

vw: ширина области просмотра

vh: высота окна просмотра

— barış çıracı
источник

Первое решение правильное, контейнер может не быть окном, и поэтому 100vh может не равняться 100%

— Бен Талиадорос

1

Я обнаружил, что когда я использовал, calc(100% - 6px)например, это отображалось как calc(94%), я должен был избежать его следующим образом, и теперь это работаетwidth: calc(~"100% - 6px");

— nsilva

4

мой код, и он работает для IE6:

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

введите описание изображения здесь

— lbsweek
источник

6

Для чего этот Javascript?

— Faiz

3

У вас должен быть контейнер для вашего контента, который вы хотите, чтобы он был 100% - 100px

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

Возможно, вам придется добавить очищающий div перед последним, </div>если ваш контент div переполнен.

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

— aleemb
источник

1

Это не будет работать. Ширина контента будет составлять 100%: jsfiddle.net/cuezK/1

— gilly3

2

Задание полей тела равным 0, ширина внешнего контейнера - 100% и использование внутреннего контейнера с полями влево / вправо в 50 пикселей, похоже, работает.

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

— tvanfosson
источник

2

Работая с панелями начальной загрузки, я искал, как разместить ссылку «удалить» на панели заголовка, которая не будет закрыта длинным соседним элементом. И вот решение:

HTML:

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

CSS:

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

Конечно, вы можете изменить «верхние» и «правильные» значения в соответствии с вашими отступами. Источник

— Артур Логинов
источник

2

Это начало работать для меня, только когда я проверил все пробелы. Таким образом, это не сработало так: width: calc(100%- 20px)или calc(100%-20px)отлично сработало width: calc(100% - 20px).

— Алина Бабичева
источник

1

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

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

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

— Тина Оруджи
источник

3

Если вы сделаете это, разве вы не получите общую ширину 100% + 100px?

— Адам Крум

: o (Прошу прощения. Должен ли я удалить свой пост или я должен оставить его и позволить

— подавляющим

1

Отрицательные голоса, как правило, предназначены для того, чтобы побудить вас очистить свой пост, чтобы вы могли восстановить очки репутации, утраченные отрицательными голосами. Если вы знаете, что ваше решение неверно, вы можете удалить его с отрицательным голосом или без него или обновить его, чтобы сделать его правильным.

— aleemb

@AdamCrume - Нет. Это было бы только в том случае, если вы также указали width:100%. Div автоматически заполнит контейнер, если вы не переопределите это, например, явно указав width, или используя floatили абсолютное позиционирование. Добавление поля в div приведет к тому, что он заполнит свой контейнер, за вычетом суммы, указанной в поле.

— gilly3

@aleemb - в этом случае отрицательные отзывы принадлежат пользователям, которые не понимают css, так как этот ответ совершенно правильный.

— gilly3

1

Обивка внешнего div получит желаемый эффект.

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

— Джош Буш
источник

1

Есть 2 метода, которые могут пригодиться для этого распространенного сценария. У каждого есть свои недостатки, но иногда они могут быть полезны.

Размер поля: рамка границы включает отступы и ширину границы в ширину элемента. Например, если вы установите ширину div с 20px отступами 20px и границей 1px равными 100px, фактическая ширина будет 142px, но с рамкой-рамкой, padding и margin находятся внутри 100px.

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

Вот отличная статья об этом: http://css-tricks.com/box-sizing/ и вот скрипка http://jsfiddle.net/L3Rvw/

И тогда есть позиция: абсолютная

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

Конечно, и то, и другое не идеально, размер окна не совсем подходит под вопрос, так как элемент на самом деле имеет ширину 100%, а не 100% - 100px (однако это будет дочерний div). И абсолютное позиционирование определенно не может использоваться в любой ситуации, но обычно это нормально, если установлена родительская высота.

— Дейв
источник

0

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%;

— Борис Гери
источник

0

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

Если вы пытаетесь создать 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">

— hannson
источник

0

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

— RC.
источник

0

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

— Джон
источник

-1

Ты не можешь

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

— Traingamer
источник

-1

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

margin-right:100px;
width:auto;

— user1552559
источник

1

Не могли бы вы добавить объяснение к вашему ответу?

— Михал Перлаковский

Я пробовал: calc (100% -100px) и результаты не одинаковы для всех платформ / браузеров, затем я попытался действительно упростить и использовал margin-right: 100px; ширина: авто; и это сработало ...

— user1552559

calc является компонентом CSS3, и этот CSS будет работать в тех браузерах, которые поддерживают CSS3.

— Сушан

-2

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

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

— Правин Ангьян
источник

Да, я думаю, мне придется держать его в javascript, я рефракторил некоторый код и хотел удалить javascript, который выполнял эти ткс.

— FMSF

1

Пожалуйста, если вы можете избежать этого, не делайте этого в JavaScript. HTML + CSS может быть сложным, и решение может быть неочевидным, но, вероятно, может сделать почти все, что вам нужно. Использование JavaScript для статических макетов почти всегда является плохой идеей.

— Николь

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