Як я можу зробити ширину = 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: 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% + 100 пікселів)

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

99

Не могли б ви вкласти гніздо з margin-left: 50px;і margin-right: 50px;в a <div>з width: 100%;?

— Арік TenEyck
джерело

4

ширина: calc (100% - 100px); це натомість правильна відповідь.

— Сушань

17

Ви можете спробувати це ...

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

Розгорніть фрагмент

vw: ширина вікна перегляду

vh: висота вікна перегляду

— barış çıracı
джерело

Перше рішення правильне, контейнер може бути не вікном, і тому 100Вт не може дорівнювати 100%

— Ben Taliadoros

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?

— Файз

3

Потрібно мати контейнер для вмісту, який ви хочете мати 100% - 100 пікс

#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>

— тванфоссон
джерело

2

Працюючи з панелями завантаження, я шукав, як розмістити посилання "delete" на панелі заголовків, що не затьмарило б довгий сусідній елемент. І ось рішення:

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% + 100 пікселів?

— Адам Крум

: o (Вибачте. Чи потрібно видалити свою посаду чи мені слід залишити її і дозволити голосуючим голосам підштовхнути її?

— Tina Orooji

1

Зазвичай голоси, спрямовані на те, щоб заохотити вас прибирати свою посаду, щоб ви могли відновити бали повторів, втрачені негативними голосами. Якщо ви знаєте, що ваше рішення є помилковим, ви можете видалити його, якщо вибираєте голоси, чи без них, або оновити його, щоб зробити його правильним.

— aleemb

@AdamCrume - Ні. Це було б лише в тому випадку, якщо ви також вказали width:100%. Див автоматично заповнить контейнер, якщо ви не перекриєте це, наприклад, чітко вказавши width, або використовуючи floatабо абсолютне позиціонування. Додавання маржі до div просто призведе до того, що він заповнить свій контейнер за вирахуванням суми, визначеної маржею.

— gilly3

@aleemb - У цьому випадку голосування є користувачами, які не розуміють css, оскільки ця відповідь цілком правильна.

— gilly3

1

Накладка на зовнішній діві отримає бажаний ефект.

<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

Є два методи, які можуть стати в нагоді для цього загального сценарію. У кожного є свої недоліки, але вони можуть бути корисними часом.

розмір ящика: рамка рамки включає прокладку та ширину рамки в ширину елемента. Наприклад, якщо встановити ширину ключа з 20px 20px прокладкою та 1px рамкою на 100px, фактична ширина буде 142px, але з полем border, і 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% - 100 пікселів (однак, дочірній поділ був би). І абсолютне позиціонування, безумовно, не може використовуватися в будь-якій ситуації, але, як правило, добре, якщо встановлено висоту батьків.

— Дейв
джерело

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">

— Хансон
джерело

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. Тож для вашого прикладу в МЕНШЕ ви б написали, width: 100% - 100px;щоб досягти саме того, чого хотіли :)

— Джон
джерело

-1

Ви не можете.

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

— Трейнгамер
джерело

-1

Це працює:

margin-right:100px;
width:auto;

— користувач1552559
джерело

1

Не могли б ви додати пояснення до своєї відповіді?

— Michał Perłakowski

Я спробував: calc (100% -100px), і результати не відповідають всім платформам / браузерам, тоді я намагався по-справжньому спростити і використав маргінально-право: 100px; ширина: авто; і спрацювало ...

— користувач1552559

calc - це компонент CSS3, і цей css буде працювати в тих браузерах, які підтримують CSS3.

— Сушань

-2

Коротка відповідь - ви цього не робите в CSS. Internet Explorer має підтримку чогось під назвою CSS Expressions, але це не є стандартним і, безумовно, не підтримується іншими браузерами, наприклад FireFox.

Вам краще зробити це в JavaScript.

— Правен Ангян
джерело

Так, я думаю, мені доведеться тримати його в JavaScript, я переломлюю якийсь код і хотів видалити javascript, що робив це tks.

— fmsf

1

Будь ласка якщо ви можете цього уникнути, не робіть цього в JavaScript. HTML + CSS може бути складним, і рішення може бути не очевидним, але воно, ймовірно, може робити майже все, що вам потрібно. Використання JavaScript для статичних макетів майже завжди погана ідея.

— Ніколь

Як я можу зробити ширину = 100% - 100 пікселів у CSS?