Как я могу сделать width = 100% - 100px в CSS?

Question

Как я могу сделать width = 100% - 100px в CSS?

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

width: 100% - 100px;

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

631 18

html css

18 ответов:

Comments

Ничего не найдено.

Chad · Accepted Answer · 2017-05-23 15:10:30

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

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

Aric TenEyck · Accepted Answer · 2011-09-15 17:01:49

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

barış çıracı · Accepted Answer · 2017-05-25 10:26:27

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

width: calc(100% - 100px);

width: calc(100vh - 100px);
vw: ширина видового экрана

vh: высота видового экрана

aleemb · Accepted Answer · 2009-05-22 21:18:30

вы должны иметь контейнер для вашего контента div, который вы хотите быть 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>

lbsweek · Accepted Answer · 2015-08-30 15:59:52

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

tvanfosson · Accepted Answer · 2009-05-22 21:19:11

установка полей тела в 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>

Artur Loginov · Accepted Answer · 2016-03-07 16:05:25

работая с панелями bootstrap, я искал, как разместить ссылку "удалить" в панели заголовка, которая не будет скрыта длинным соседним элементом. И вот решение:

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; }
конечно, вы можете изменить значения "сверху" и "справа" в соответствии с вашими отступами. источник

Tina Orooji · Accepted Answer · 2009-05-22 21:19:37

Не могли бы вы сделать:
margin-right: 50px;
margin-left: 50px;
Edit: мое решение-неправильное. Решение опубликовано Арик TenEyck предполагая, что с помощью div с шириной 100% и тогда вложенности другой div с помощью поля представляется более правильным.

Josh Bush · Accepted Answer · 2009-05-22 21:19:51

прокладка на внешнем 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>

Dave · Accepted Answer · 2014-03-22 06:28:31

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

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

Alina Babycheva · Accepted Answer · 2017-05-25 13:15:58

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

Boris Guéry · Accepted Answer · 2009-05-22 21:10:21

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

hannson · Accepted Answer · 2009-05-22 21:20:04

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

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

RC. · Accepted Answer · 2012-06-19 21:58:52

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

Jon · Accepted Answer · 2012-09-17 20:24:39

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

Praveen Angyan · Accepted Answer · 2009-05-22 20:55:54

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

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

Traingamer · Accepted Answer · 2009-05-22 20:56:14

ты не можешь.

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

user1552559 · Accepted Answer · 2016-01-22 18:43:54

это работает:
margin-right:100px;
width:auto;

-1

2016-01-22 18:43:54