HTML ve CSS: Genişliği olan bir div etiketi nasıl düzenlenir:% 100 ve sol: 300 piksel

Bir div etiketinin tarzını belirlerken bir sorunum var. Sol tarafta başlayan bir div etiketine sahip olmak istedim: 300px ve tarayıcı ekranının sonuna kadar yayılmış. Ancak genişlik koyarsam:% 100, div etiketi tarayıcı ekranının dışına çıkar.

1

7 cevap

Sadece doğru kullan.

div {
  position: absolute;
  left: 300px;
  right: 0;
}

https://jsfiddle.net/v2qq0gyp/1/

Bunu tam sayfa div ile sonuçlanan üst ve alt için de yapabilirsiniz:

div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Göreceli pozisyon ile:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

div {
    position: relative;    
    left: 30%;
    right: 0;    
    margin-right: 30%;
}
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat urna, interdum non velit id, fringilla tempus lectus. Integer fermentum est in nisi lobortis aliquet. Sed rutrum purus purus, non fermentum nulla volutpat id. In lacus lacus, condimentum ut sollicitudin id, finibus et sem. Nulla magna elit, sagittis vitae tortor eu, tempor placerat elit. Fusce fringilla quam in erat commodo, eget vehicula tellus eleifend. Donec vitae nisi urna.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat urna, interdum non velit id, fringilla tempus lectus. Integer fermentum est in nisi lobortis aliquet. Sed rutrum purus purus, non fermentum nulla volutpat id. In lacus lacus, condimentum ut sollicitudin id, finibus et sem. Nulla magna elit, sagittis vitae tortor eu, tempor placerat elit. Fusce fringilla quam in erat commodo, eget vehicula tellus eleifend. Donec vitae nisi urna.
</div>
</div> </div>
2
katma
@SethMcClaine Nasıl? Zaten mutlak bir pozisyon.
katma yazar Mike Robinson, kaynak
@crazymatt Muhtemelen. Kemanın var mı?
katma yazar Mike Robinson, kaynak
Not: Bu, sayfanın geri kalanının düzenini potansiyel olarak ortaya çıkaracaktır
katma yazar Seth McClaine, kaynak
Mutlak bir konum olduğunu söylemez ... göreceli olabilir ...
katma yazar Seth McClaine, kaynak
boşuna anladım;)
katma yazar crazymatt, kaynak
Bu kodu test ederek düzen 300px sola başlamıyor, bir şey eksik mi?
katma yazar crazymatt, kaynak
Bu kaydırılabilir değildir, mutlak elemanlar akış dışındadır. Göreceli olun ve ben size bir başparmak vereceğim, ama bu biraz farklı çalışmak zorunda.
katma yazar mystrdat, kaynak

Genişlikte calc 'i de kullanabilirsiniz.

Örnek:

div {
 position: absolute;
 left: 300px;
 width: calc(100% - 300px);
}

Yorumlara göre tüm tarayıcılarda kullanılamaz ... Yine de bir keman.

1
katma
@SethMcClaine baraj seni! lol sadece şaka. işaret ettiğin için teşekkür ederim, bunun farkında değildi
katma yazar duxfox--, kaynak
Aslında oldukça destekleniyor ve kişisel favori yöntemim. Saf CSS olduğu için en yumuşak ve en hızlı çözümdür. caniuse.com/#feat=calc
katma yazar Christian Juth, kaynak
Bu çözümü gerçekten sevdim, uygun olduğunu bilmiyordum (+1)
katma yazar Seth McClaine, kaynak
Tüm tarayıcılarda mevcut değil: caniuse.com/#feat=calc
katma yazar Seth McClaine, kaynak

Burada abartılı çözümler bir sürü.

Bir div , ebeveynlerine tam yatay genişlikte doğal olarak genişleyen bir blok öğesidir. Bu, sadece soldan bir miktar minimum çözüm olarak itmeniz gerektiği anlamına gelir ve içerdiği öğeye bağlı olarak kutudan çıkar. Devam eden en iyi uygulamaları elde etmek için div 'a bir sınıf ekleyin ve şunları kullanın:

.class {
  width: auto;//is default
  margin-left: 300px;
}
1
katma

'Sol' yerine 'sol-sol' veya 'sol-sol' ekleyerek çözebileceğinizi düşünüyorum. Ve 'genişlik:% 100' belirtmeyin.

1
katma
Ayrıca, bazı görüntüleme türlerinde çalışmaz: jsfiddle.net/rvpjmj8d
katma yazar Seth McClaine, kaynak
işe yaramadı ** jsfiddle.net/x8zfeLw3
katma yazar Seth McClaine, kaynak
Bu, sadece div içeriği kalan alandan büyükse işe yarar.
katma yazar Seth McClaine, kaynak
İlk örnekte @SethMcClaine - aslında işe yarıyor! blok 50 piksel sağa 'hareket' etti. Görünmesi için kaydırma yapması gerçeği, çok uzun bir kelime yüzünden. Ve bu, bu dava ile ilgili değil. İkinci durumda, evet, haklısın. Ancak bu bazı özel örneklerdir. Ancak bir 'div' deyince, herhangi bir stil kodu belirtmeden, varsayılan stile sahip olduğunu varsayıyorsunuz (display: block). Cevabımın '-1' noktasını hak etmediğine inanıyorum, ki bu yararlı değil demektir. Bu kullanışlı.
katma yazar alexeiTruhin, kaynak
@SethMcClaine, yorumunuzu ayrıntılandırır. div varsayılan olarak 'dispaly: block' a sahiptir; bu, üst eksi dolgusunu sol-sağ, sol-sağ/sol/sağ ve kenar-sol/sağ kenar boşluğunu alır.
katma yazar alexeiTruhin, kaynak

Bu doğru çalışması gerektiğini deneyin :)

Kod:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

div{
  height: 100px;
  margin-left: 300px;
  background-color: red;
}
<div> Content </div>
</div> </div>
1
katma
aygıt genişliği , width değeri olarak mevcut değil, otomatik varsayılan ayar tamamdır, bu nedenle width bildirimini silebilirsiniz çünkü div bir ekran: blok öğesidir ve yatay ekran alanını doldurmak için doğal olarak genişler.
katma yazar mystrdat, kaynak
teşekkürler dostum, haklısın.
katma yazar Bbird, kaynak

JQuery'yi kullanma

$('.elementClass').width($(window).width()-300);
0
katma
belki jQuery de yeniden boyutlandırma aynı şeyi yaptığım sürece en iyi yoldur
katma yazar LittleFunny, kaynak
Doğru .. Bu yolu kullanabilirim ... CSS kullanırsam diğer tarayıcının aynı işlevi göreceği yerde daha fazla düşünmeliyim
katma yazar LittleFunny, kaynak
Bunu window.onresize için bir dinleyiciye sarmanız gerekecek, yoksa kullanıcı kendi tarayıcı penceresini yeniden boyutlandırdığında kırılacak.
katma yazar Mike Robinson, kaynak
Bunu yapmak için kaba bir güç yolu, ama oldukça tutarlı
katma yazar Seth McClaine, kaynak
Doğru ifade :-)
katma yazar Seth McClaine, kaynak
Sadece CSS ile kolayca başarabileceğiniz bir şey için JavaScript kullanmanıza gerek yok.
katma yazar mystrdat, kaynak

Diğer bir seçenek% olarak sola kullanmaktır

left: 30%;
width: 70%;
0
katma
Genişliği kaldırın, div otomatik olarak kalan alana genişler, çünkü bu bir blok elemanıdır.
katma yazar mystrdat, kaynak