Jak mogę zrobić width = 100%

153

W CSS, jak mogę zrobić coś takiego:

width: 100% - 100px;

Myślę, że jest to dość proste, ale trochę trudno jest znaleźć przykłady, które to potwierdzają.

html css fmsf
źródło

1

Połączone pytanie stackoverflow.com/questions/11093943/… daje interesującą, ale nie w pełni zgodną z poprzednimi wersjami odpowiedź, może też chciałbyś się temu przyjrzeć.

11684

5

Dla każdego, kto zetknie się z tym pytaniem, Chad odpowiedział, że współczesne przeglądarki obsługują width: calc(100% - 100px);to kilka odpowiedzi i mam nadzieję, że pytający zaktualizuje swoje pytanie :) :)

Anders M.

278

Nowoczesne przeglądarki obsługują teraz:

width: calc(100% - 100px);

Aby zobaczyć listę obsługiwanych wersji przeglądarek, sprawdź: Czy mogę użyć funkcji calc () jako wartości jednostki CSS?

Istnieje zapasowe rozwiązanie jQuery: css width: calc (100% -100px); alternatywne użycie jquery

Czad
źródło

13

Znalazłem, gdy calc(100% - 6px)calc(94%)width: calc(~"100% - 6px");

używałem,

12

Uważaj, musisz mieć spacje wokół znaku -(lub +). To działa: calc(100% - 100px); A to nie działa:calc(100%-100px);

freefaller

Jestem trochę zaskoczony, że nie ma opcji automatycznego odejmowania dwukrotnego wypełnienia elementu, co zwykle byłoby dość powszechnym przypadkiem. Np. Muszę to zrobić padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);i musiałbym teraz zmienić to 0.25emw dwóch miejscach, jeśli trzeba by było zmienić.

cnst

Wielkie dzięki, chciałbym również zauważyć, że działa w przypadku dodawania: (100% + 100px)

Viktor Mellgren

99

Mogłaś zagnieździć div z margin-left: 50px;a margin-right: 50px;wewnątrz <div>z width: 100%;?

Aric TenEyck
źródło

4

szerokość: calc (100% - 100px); zamiast tego jest to poprawna odpowiedź.

Sushan

17

Możesz spróbować tego ...

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

Rozwiń fragment

vw: szerokość rzutni

vh: wysokość rzutni

barış çıracı
źródło

Pierwsze rozwiązanie jest poprawne, pojemnik nie może być okno, a zatem nie może równać 100vh 100%

Ben Taliadoros

1

Znalazłem, kiedy calc(100% - 6px)calc(94%)width: calc(~"100% - 6px");

używałem

4

mój kod i działa dla 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>

wprowadź opis obrazu tutaj

lbsweek
źródło

6

Do czego służy ten Javascript?

Faiz

3

Musisz mieć kontener na swój element div zawartości, który ma mieć 100% - 100 pikseli

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

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

Może być konieczne dodanie czyszczącego elementu div tuż przed ostatnim, </div>jeśli element div zawartości jest przepełniony.

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

aleemb
źródło

1

To nie zadziała. Szerokość treści wyniesie 100%: jsfiddle.net/cuezK/1

gilly3

2

Ustawienie marginesów treści na 0, szerokość zewnętrznego pojemnika na 100% i użycie wewnętrznego pojemnika z lewym / prawym marginesem 50 pikseli wydaje się działać.

<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
źródło

2

Pracując z panelami bootstrap, szukałem sposobu umieszczenia linku „usuń” w panelu nagłówka, który nie byłby zasłonięty przez długi sąsiedni element. A oto rozwiązanie:

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

Oczywiście możesz modyfikować wartości „top” i „right” zgodnie z własnymi wcięciami. Źródło

Artur Loginov
źródło

2

Zaczęło mi działać dopiero wtedy, gdy sprawdziłem wszystkie spacje. Więc to nie działało w ten sposób: width: calc(100%- 20px)lub calc(100%-20px)i doskonale działało width: calc(100% - 20px).

Alina Babycheva
źródło

1

Czy mógłbyś zrobić:

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

Edycja: moje rozwiązanie jest złe. Rozwiązanie opublikowane przez Arica TenEycka, sugerujące użycie elementu div o szerokości 100%, a następnie zagnieżdżenie innego elementu div przy użyciu marginesów, wydaje się bardziej poprawne.

Tina Orooji
źródło

3

Jeśli to zrobisz, czy nie skończysz z całkowitą szerokością wynoszącą 100% + 100 pikseli?

Adam Crume

: o (Przepraszam. Czy powinienem usunąć swój post, czy powinienem go zostawić i pozwolić głosom w dół go popchnąć?

Tina Orooji

1

głosy w dół mają zazwyczaj zachęcić Cię do uporządkowania swojego posta, abyś mógł odzyskać punkty rep utracone przez głosy negatywne. Jeśli wiesz, że Twoje rozwiązanie jest błędne, możesz je usunąć, z głosami negatywnymi lub bez, lub zaktualizować je, aby naprawić.

aleemb

@AdamCrume - Nie. Byłoby tak tylko w przypadku, gdybyś również określił width:100%. Element div automatycznie wypełni kontener, chyba że zostanie to zastąpione, np. Poprzez jawne określenie widthlub użycie floatpozycjonowania bezwzględnego lub. Dodanie marginesu do elementu div spowoduje po prostu wypełnienie jego kontenera, pomniejszone o kwotę określoną przez margines.

gilly3

@aleemb - w tym przypadku głosy przeciw są użytkownikom, którzy nie rozumieją CSS, ponieważ ta odpowiedź jest całkowicie poprawna.

gilly3

1

Wypełnienie na zewnętrznej stronie div zapewni pożądany efekt.

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

Josh Bush
źródło

1

Istnieją 2 techniki, które mogą się przydać w tym typowym scenariuszu. Każdy ma swoje wady, ale oba mogą być czasami przydatne.

box-sizing: border-box zawiera dopełnienie i szerokość obramowania na szerokość elementu. Na przykład, jeśli ustawisz szerokość elementu div z dopełnieniem 20 pikseli, 20 pikseli i obramowaniem 1 piks.

.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;
}

Oto doskonały artykuł na ten temat: http://css-tricks.com/box-sizing/ i tutaj jest skrzypce http://jsfiddle.net/L3Rvw/

Jest też pozycja: absolutna

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

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

Żadne z nich nie są oczywiście doskonałe, rozmiar pola nie pasuje do pytania, ponieważ element ma w rzeczywistości 100% szerokości, a nie 100% - 100 pikseli (jakkolwiek element podrzędny byłby). Pozycjonowanie bezwzględne zdecydowanie nie może być używane w każdej sytuacji, ale zwykle jest w porządku, o ile jest ustawiona wysokość nadrzędna.

Dave
źródło

0

CSS nie może służyć do animacji ani modyfikacji stylu wydarzeń.

Jedynym sposobem jest użycie funkcji javascript, która zwróci szerokość danego elementu, a następnie odejmie od niego 100px i ustawi nowy rozmiar szerokości.

Zakładając, że używasz jQuery, możesz zrobić coś takiego:

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

I z natywnym javascriptem:

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

Zakładamy, że masz ustawiony styl css na 100%;

Boris Guéry
źródło

0

Czy używasz trybu standardowego? Myślę, że to rozwiązanie zależy od tego.

Jeśli próbujesz utworzyć dwie kolumny, możesz zrobić coś takiego:

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

Następnie użyj CSS do stylizacji:

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

Jeśli nie chcesz dwóch kolumn, prawdopodobnie możesz je usunąć <div id="left">

Hannson
źródło

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.
źródło

0

Możesz przyjrzeć się użyciu LESS , czyli pliku JavaScript, który wstępnie przetwarza CSS, dzięki czemu możesz dołączyć logikę i zmienne do swojego CSS. Więc na przykład w LESS napisałbyś, width: 100% - 100px;aby osiągnąć dokładnie to, czego chciałeś :)

Jon
źródło

-1

Nie możesz.

Możesz jednak użyć marginesów, aby uzyskać ten sam wynik.

Traingamer
źródło

-1

To działa:

margin-right:100px;
width:auto;

user1552559
źródło

1

Czy mógłbyś dodać wyjaśnienie do swojej odpowiedzi?

Michał Perłakowski

Próbowałem: calc (100% -100px) i wyniki nie są spójne na wszystkich platformach / przeglądarkach, potem próbowałem naprawdę uprościć i użyłem margin-right: 100px; szerokość: auto; i zadziałało ...

user1552559

calc to komponent CSS3 i ten css będzie działał na tych przeglądarkach, które obsługują CSS3.

Sushan

-2

Krótka odpowiedź brzmi: NIE Rób tego w CSS. Internet Explorer obsługuje coś, co nazywa się wyrażeniami CSS, ale nie jest to standardowe i zdecydowanie nie jest obsługiwane przez inne przeglądarki, na przykład FireFox.

Lepiej byłoby zrobić to w JavaScript.

Praveen Angyan
źródło

Tak, chyba będę musiał zachować to w javascript, refraktoryzuję jakiś kod i chciałem usunąć javascript, który robił to tks.

fmsf

1

Proszę jeśli można uniknąć to nie rób tego w JavaScript. HTML + CSS może być trudny, a rozwiązanie może nie być oczywiste, ale prawdopodobnie może zrobić prawie wszystko, czego potrzebujesz. Używanie JavaScript do układów statycznych jest prawie zawsze złym pomysłem.

Nicole,

Jak mogę zrobić width = 100% - 100px w CSS?

Odpowiedzi: