CSS'de width = 100% - 100px nasıl yapabilirim?

153

CSS'de böyle bir şeyi nasıl yapabilirim:

width: 100% - 100px;

Sanırım bu oldukça basit ama bunu gösteren örnekler bulmak biraz zor.

html css

— fmsf
kaynak

1

Bağlantılı soru stackoverflow.com/questions/11093943/… ilginç, ancak tamamen geriye dönük uyumlu olmayan bir cevap verir, belki de buna bir göz atmak istersiniz.

— 11684

5

Bu soruyu aşan herkes için Chad, modern tarayıcıların width: calc(100% - 100px);bunu desteklediğini söyledi ve birkaç cevap verdi ve umarım asker sorusunu güncelleyecek :) :)

— Anders M.

278

Modern tarayıcılar artık aşağıdakileri desteklemektedir:

width: calc(100% - 100px);

Desteklenen tarayıcı sürümleri listesini görmek için: CSS birim değeri olarak calc () kullanabilir miyim?

Bir jQuery yedeği vardır: css width: calc (100% -100px); jquery kullanarak alternatif

— Çad
kaynak

13

calc(100% - 6px)Mesela kullandığım zaman buldum, calc(94%)aşağıdaki gibi kaçmak zorunda kaldım ve şimdi çalışıyorwidth: calc(~"100% - 6px");

— nsilva

12

Unutmayın, -(veya +) karakterin etrafında boşluk olmalıdır . Bu çalışıyor: calc(100% - 100px); Ve bu yapmaz:calc(100%-100px);

— freefaller

Genellikle oldukça yaygın bir kullanım alanı olan öğenin dolgusunu 2 kat otomatik olarak çıkarma seçeneği olmadığından biraz şaşırdım. Örneğin, sonunda yapmak padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);zorundayım ve 0.25emeğer değiştirilmesi gerekiyorsa, şimdi iki yerde değiştirmek zorunda kalacaktım.

— cnst

Çok teşekkürler, ayrıca ekleme için işe yaradığını da belirtmek isterim: (% 100 + 100

— piksel

99

Eğer yuva ile bir div Olabilir margin-left: 50px;ve margin-right: 50px;bir iç <div>ile width: 100%;?

— Aric TenEyck
kaynak

4

genişlik: kalk (% 100 - 100 piksel); bunun yerine doğru cevap budur.

— Sushan

17

Bunu deneyebilirsiniz ...

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

Snippet'i genişlet

vw: görünüm genişliği

vh: görünüm yüksekliği

— barış çıracı
kaynak

İlk çözüm doğru, konteyner pencere olmayabilir ve bu nedenle 100vh% 100'e eşit olmayabilir

— Ben Taliadoros

1

calc(100% - 6px)Mesela kullandığımda buldum, calc(94%)aşağıdaki gibi kaçmak zorunda kaldım ve şimdi çalışıyorwidth: calc(~"100% - 6px");

— nsilva

4

kodum ve IE6 için çalışır:

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

resim açıklamasını buraya girin

— lbsweek
kaynak

6

Bu Javascript ne için?

— Faiz

3

İçerik bölmeniz için% 100 - 100 piksel olmasını istediğiniz bir kapsayıcıya sahip olmanız gerekir

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

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

</div>İçerik bölmeniz taşarsa , sondan hemen önce bir temizleme div eklemeniz gerekebilir .

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

— aleemb
kaynak

1

Bu işe yaramayacak. İçerik genişliği% 100 olacaktır: jsfiddle.net/cuezK/1

— gilly3

2

Gövde kenar boşluklarını 0, dış kabın genişliğini% 100 olarak ayarlamak ve 50 piksel sol / sağ kenar boşluklarına sahip bir iç kap kullanmak işe yarar.

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

2

Önyükleme panelleriyle çalışarak, uzun komşu eleman tarafından gizlenmeyecek başlık paneline "sil" bağlantısını nasıl yerleştireceğimizi araştırıyordum. Ve işte çözüm:

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

Elbette girintilerinize göre "üst" ve "doğru" değerleri değiştirebilirsiniz. Kaynak

— Artur Loginov
kaynak

2

Sadece tüm alanları kontrol ettiğimde benim için çalışmaya başladı. Yani, böyle çalışmadı: width: calc(100%- 20px)ya da calc(100%-20px)mükemmel bir şekilde çalıştı width: calc(100% - 20px).

— Alina Babycheva
kaynak

1

Yapabilir misin:

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

Düzenleme: Çözümüm yanlış. Aric TenEyck tarafından yayınlanan çözüm, genişliği% 100 olan bir div kullanmayı ve ardından kenar boşluklarını kullanarak başka bir div iç içe yerleştirmeyi önererek daha doğru görünüyor.

— Tina Orooji
kaynak

3

Bunu yaparsanız, toplam genişlik% 100 + 100 piksel olacak mı?

— Adam Crume

: o (Üzgünüm.

— Yazımı silmeli

1

olumsuz oylar genellikle postanızı temizlemeye teşvik etmek içindir, böylece olumsuz oylar tarafından kaybedilen tekrar puanları yeniden kazanabilirsiniz. Çözümünüzün yanlış olduğunu biliyorsanız, aşağı oyla veya oysuz olarak silebilir veya doğru yapmak için güncelleyebilirsiniz.

— aleemb

@AdamCrume - Hayır. Bu sadece siz de belirtmeniz durumunda geçerlidir width:100%. Bir div, örneğin açıkça belirterek veya mutlak konumlandırma widthkullanarak geçersiz kılmadığınız sürece kabı otomatik olarak dolduracaktır float. Bir div'a bir kenar boşluğu eklemek, yalnızca kabını doldurmasına neden olur, kenar boşluğu tarafından belirtilen miktar daha az olur.

— Mayıs 12:37

@aleemb - Bu durumda downvotes bu cevap mükemmel bir şekilde doğru olduğundan css'i anlamayan kullanıcılar tarafından yapılır.

— Mayıs 12:38

1

Dış div üzerinde dolgu istenen efekti elde edecektir.

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

1

Bu yaygın senaryo için kullanışlı olabilecek 2 teknik vardır. Her birinin dezavantajları vardır, ancak her ikisi de zaman zaman yararlı olabilir.

box-sizeing: border-box , bir öğenin genişliğinde dolgu ve kenarlık genişliği içerir. Örneğin, 20px 20px dolgu ve 1px kenarlıklı bir div genişliğini 100px olarak ayarlarsanız, gerçek genişlik 142px olur ancak kenarlık kutusuyla hem dolgu hem de kenar boşluğu 100px'in içindedir.

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

İşte mükemmel bir makale: http://css-tricks.com/box-sizing/ ve işte bir keman http://jsfiddle.net/L3Rvw/

Ve sonra pozisyon var: mutlak

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

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

Her ikisi de mükemmel değil, kutu boyutlandırma soruya tam olarak uymuyor, çünkü öğe aslında% 100 - 100 piksel yerine% 100 genişliktedir (ancak bir alt div olacaktır). Mutlak konumlandırma her durumda kesinlikle kullanılamaz, ancak ebeveyn yüksekliği ayarlandığı sürece genellikle uygundur.

— Dave
kaynak

0

CSS, animasyon veya etkinliklerde herhangi bir stil değişikliği için kullanılamaz.

Tek yol, belirli bir öğenin genişliğini döndürecek bir javascript işlevini kullanmak, daha sonra ona 100px çıkarmak ve yeni genişlik boyutunu ayarlamaktır.

JQuery kullandığınızı varsayarsak, böyle bir şey yapabilirsiniz:

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

Ve yerli javascript ile:

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

% 100 ile ayarlanmış bir css stiliniz olduğunu varsayıyoruz;

— Boris Guéry
kaynak

0

Standartlar modunu kullanıyor musunuz? Bu çözüm bence buna bağlı.

2 sütun yapmaya çalışıyorsanız, şöyle bir şey yapabilirsiniz:

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

Ardından stil oluşturmak için CSS kullanın:

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 sütun istemiyorsanız, kaldırabilirsiniz <div id="left">

— hannson
kaynak

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

0

Sen kullanarak içine bakabilirsiniz az sizin CSS içine mantık ve değişkenleri içeren, böylece CSS ön işler bir JavaScript dosyası olduğunu. Yani örneğiniz için, LESS'de width: 100% - 100px;tam olarak istediğinizi başarmak için yazacaksınız :)

— Jon
kaynak

-1

Yapamazsın.

Bununla birlikte, aynı sonucu etkilemek için kenar boşluklarını kullanabilirsiniz.

— Traingamer
kaynak

-1

Bu çalışıyor:

margin-right:100px;
width:auto;

— user1552559
kaynak

1

Cevabınıza bir açıklama ekleyebilir misiniz?

— Michał Perłakowski

Denedim: calc (100% -100px) ve sonuçlar tüm platformlarda / tarayıcılarda tutarlı değil, o zaman gerçekten basitleştirmeye çalıştım ve marj-right: 100px; en: otomatik; ve işe yaradı ...

— user1552559

calc, CSS3 bileşenidir ve bu css, CSS3'ü destekleyen tarayıcılarda çalışır.

— Sushan

-2

Kısa cevap, bunu CSS'de YAPMAYIN. Internet Explorer'ın CSS İfadeleri olarak adlandırılan bir şey için desteği vardır, ancak bu standart değildir ve örneğin FireFox gibi diğer tarayıcılar tarafından kesinlikle desteklenmez.

Bunu JavaScript'te yapmak daha iyi olur.

— Praveen Angyan
kaynak

Evet sanırım javascript içinde tutmak zorunda kalacak, bazı kod refractoring ve bu tks yapıyor javascript kaldırmak istedim.

— fmsf

1

Bundan kaçınabiliyorsanız lütfen bunu JavaScript'te yapmayın. HTML + CSS zor olabilir ve çözüm açık olmayabilir, ancak muhtemelen ihtiyacınız olan her şeyi yapabilir. Statik düzenler için JavaScript kullanmak neredeyse her zaman kötü bir fikirdir.

— Nicole