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

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

129 голосов
/ 22 мая 2009

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

width: 100% - 100px;

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

Ответы [ 18 ]

233 голосов
/ 17 января 2013

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

width: calc(100% - 100px);

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

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

98 голосов
/ 22 мая 2009

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

16 голосов
/ 11 февраля 2016

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

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

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

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

4 голосов
/ 26 ноября 2013

мой код, и он работает для 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>

enter image description here

3 голосов
/ 22 мая 2009

У вас должен быть контейнер для содержимого, который вы хотите, чтобы он был 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>
2 голосов
/ 22 мая 2009

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

<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>
2 голосов
/ 07 марта 2016

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

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 голосов
/ 25 мая 2017

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

1 голос
/ 22 марта 2014

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

Размер поля: рамка-граница включает отступы и ширину границы в ширину элемента. Например, если вы установите ширину div с 20px отступами 20px и границей 1px равными 100px, фактическая ширина будет 142px, но с рамкой-рамкой отступы и поля будут внутри 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). И абсолютное позиционирование определенно не может использоваться в любой ситуации, но обычно это нормально, если установлена ​​родительская высота.

1 голос
/ 22 мая 2009

Заполнение внешнего 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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...