Div içeriğinin dibe hizalanması

1163

Aşağıdaki CSS ve HTML kodum olduğunu varsayalım:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>
Snippet'i genişlet

Üstbilgi bölümü sabit yüksekliktedir, ancak üstbilgi içeriği değişebilir.

Başlık içeriğinin başlık bölümünün altına dikey olarak hizalanmasını istiyorum, böylece metnin son satırı başlık bölümünün altına "yapışır".

Yani tek bir metin satırı varsa, şöyle olur:

-----------------------------
| Üst Başlık
|
|
|
| başlık içeriği (bir satırla sonuçlanır)
-----------------------------

Ve üç satır olsaydı:

-----------------------------
| Üst Başlık
|
| başlık içeriği (bu şekilde
| mükemmel şeyler
| üç satıra yayılır)
-----------------------------

Bu CSS'de nasıl yapılabilir?

html  css  vertical-alignment 
— kristof
kaynak

Yanıtlar:

1322

Göreceli + mutlak konumlandırma en iyi seçenektir:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>
Snippet'i genişlet

Ancak bununla ilgili sorunlarla karşılaşabilirsiniz. Denediğimde, içeriğin altında görünen açılır menülerle ilgili sorunlar yaşadım. Sadece hoş değil.

Dürüst olmak gerekirse, dikey merkezleme sorunları ve öğelerle herhangi bir dikey hizalama sorunu sabit yükseklik için değil, sadece tabloları kullanmak daha kolaydır.

Örnek: Bu HTML düzenini tablo kullanmadan yapabilir misiniz?

— cletus
kaynak
4
Aslında bu çözümü burada sormadan önce buldum, ama bir şekilde pozisyon eklemeyi unuttum: göreceli; div başlığına ve içeriğin sayfanın altına inmeye devam etti. Teşekkürler
— kristof
15
Açılır konumunuzu öne çıkarmak için z-index özelliği ile yönetebilirsiniz. Z-index özelliğinin nispeten veya kesinlikle konumlandırılmış öğelerle çalıştığını unutmayın. Ayrıca, düzen sonuçlarını elde etmek için bir tablo kullanmak semantik olarak doğru değildir.
— Alejandro García Iglesias
1
Orijinal problemde açıklandığı gibi metin içeriği söz konusu olduğunda, # başlık içeriği gerçekten bir punsur olmalı ya da en azından birspan
— Josh Burgess
2
Tablo olmayan veriler için tablo kullanmayın! Bunun yerine, CSS görüntüleme özelliklerini kullanın display: table-cellveya table-rowveya veya table. Saf düzen için bir daha asla tablo kullanmanız gerekmez.
— Jeremy Moritz
1
Başlık konumu neye göre?
— stack1
158

CSS konumlandırmasını kullanın:

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

Gibi cletus kaydetti , bu işi yapmak için header-içeriği tespit gerekmez.

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
— Patrick McElhaney
kaynak
4
fyi ... Bu, başlık içeriğimin genişliğini daraltmasına neden oldu, bu yüzden width = '100%'başlık içeriğine bir eklemek zorunda kaldım
— dsdsdsdsd
2
@ ddsdsdsdsd Bunu # header-content öğesine display: block ekleyerek de düzeltebilirsiniz.
— Patrick McElhaney
1
@dsdsdsdsd Bunun nedeni, <span>öğelerin display: inline;varsayılan olarak kabın tüm genişliğini kaplamamasıdır . En uygun düzeltme, yayılma alanını <div>varsayılan olarak bir blok öğesi olan a olarak değiştirmek olacaktır .
— BadHorsie
1
Ya da varsayılan olarak engellenen ve metni arama motorları, yardımcı teknolojiler ve kodu okuyan kişiler için yararlı olan bir başlık olarak tanımlayan <h1> - <h6> öğelerinden biri.
— Patrick McElhaney
Alt kısımdaki içerik değişken yüksekliğe sahip olduğunda çalışmaz, kap sınırlarının dışına uzanmasına neden olur.
— Mozfet
126

Eski tarayıcılardan endişe etmiyorsanız bir flexbox kullanın.

Üst öğenin esnek olmak için ekran türüne ihtiyacı var

div.parent {
  display: flex;
  height: 100%;
}

Daha sonra alt öğenin hizalama-benliğini esnek uç olarak ayarlarsınız.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Öğrenmek için kullandığım kaynak: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

— Lee Irvine
kaynak
@bafromca, işe yaramayan iki sebep. 1: Hizalama öğeleri yerine 'align-self' kullanın (benim hatam, orijinal yazımı düzenledim). 2:% 100 yükseklik, ebeveynin yüksekliği olmadığı sürece çalışmaz.
— Lee Irvine
Benim için çalışmadı, ben konteynerin altındaki değil, kabın altındaki istiyorum.
— Mozfet
2020'de bu doğru cevap olmalı: caniuse.com/#feat=flexbox
— tonygatta
119

Bu özellikleri kullanıyorum ve işe yarıyor!

#header {
  display: table-cell;
  vertical-align: bottom;
}
— johannchopin
kaynak
42
IE8 ve önceki sürümlerde desteklenmez. IE9'da desteklenir.
— random_user_name
23
@cale_b göre caniuse.com o YAPAR IE8 iş.
— Zach Lysobey
5
@ZachL Happenstance - Kurumsal bir müşteri için IE8'de eski bir uygulamayı destekliyorum ve bu aslında işe yarıyor.
— Daniel Szabo
4
@fguillen: Chrome'da (v31) şimdi de test edildi. Orada da çalışıyor.
— Daniel Szabo
5
table-cellçok şey kırıyor. Bootstrap ızgara sistemi gibi. col-md-12size artık% 100 geniş bir div vermeyecek.
— Nuh
65

Aynı sorunla bir süre uğraştıktan sonra, nihayet tüm gereksinimlerimi karşılayan bir çözüm buldum:

  • Kabın yüksekliğini bilmemi gerektirmez.
  • Göreceli + mutlak çözümlerden farklı olarak, içerik kendi katmanında yüzmez (yani, normalde kapsayıcı div içine gömülür).
  • Tarayıcılarda çalışır (IE8 +).
  • Uygulaması basit.

Çözüm sadece <div>"hizalayıcı" dediğim bir tane alır :

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

Bu hile, metin taban çizgisini kabın altına iten uzun, sıska bir div oluşturarak çalışır.

İşte OP'nin ne istediğini sağlayan tam bir örnek. Ben sadece gösteri amacıyla "bottom_aligner" kalın ve kırmızı yaptım.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Alt içeriği hizalama

— Greg Hapishanesi
kaynak
Neredeyse mükemmel :) ama otomatik satır kesmelerine izin vermiyor.
— Gaston Sanchez
Dış kap kayabilirse çalışmaz (taşma-y: otomatik). :(
— ecraig12345
Sanırım marin: 8px marj
— Graham Perrin
2
Bu, bir ::beforekurala konulursa, ekstra bir eleman ihtiyacını ortadan kaldırırsa da çalışır . Sonunda flex kullandık, ancak yapamadığınızda faydalıdır.
— Sheepy
Bu gerçekten güzel bir çözüm. Yalnızca heightkutunun / kabın ve ebeveynlerinin (piksel veya% veya herhangi bir değere) ayarlanmış olması durumunda çalışır .
— BairDev
38

Bunu yapmanın modern yolu flexbox kullanmak olacaktır . Aşağıdaki örneğe bakın. Some text...Doğrudan bir esnek kapta bulunan metin anonim bir esnek öğeye sarıldığı için herhangi bir HTML etiketine sarmanıza bile gerek yoktur .

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>
Snippet'i genişlet

Yalnızca bir miktar metin varsa ve kabın altına dikey olarak hizalamak istiyorsanız.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
<section>Some text aligns to the bottom</section>
Snippet'i genişlet

— Çıkartma
kaynak
2
Altta hizalanmış elemanımın belge akışında hala mevcut olması gerekiyordu, bu da kullanırken mümkün değil position:absolute;. Bu çözüm benim durumum için mükemmel çalıştı!
— Swen
1
Reaksiyon bileşenlerinin içinde bu doğru çözümdür. Kabul edilen çözüm başarısız.
— Soleil - Mathieu Prévot
1
Bu benim için gerçekten işe yarayan tek çözüm. Belki de @Soleil'in de bahsettiği gibi React ile ilgilidir ... Ben bir CSS uzmanı değilim, bu yüzden tam olarak emin değilim.
— BK
Reaksiyon bileşeninde mükemmel çalışır
— user1155773
25

Üst / blok öğesinin satır yüksekliği satır içi öğeden daha büyükse, satır içi veya satır içi blok öğeleri blok düzeyi öğelerinin altına hizalanabilir. *

biçimlendirme:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* standart modunda olduğunuzdan emin olun

— dougwig
kaynak
25 
display: flex;
align-items: flex-end;
— user3053247
kaynak
2
Flexbox'ın eski tarayıcılarda iyi desteklenmediğini unutmayın .
— AnthonyB
11
@AnthonyB - eski tanımlansın mı? Bu kaydı geliştiriciler olarak değiştirmek zorundayız. Teknoloji ilerliyor ve eskisi hayatta kalmıyor. IE9 ve 10'un görebildiğim kadarıyla esnek sorunları var, ancak sırasıyla 2011 ve 2012'de piyasaya sürüldü ... 2017. Bu eski ve kırık tarayıcıları bırakmalıyız. Görsel memnuniyet için değil, güvenlik ve genel yazılım güncellemeleri için.
— Tisch
3
@Tamamen haklısın, geliştiriciler olarak iyi ve son teknolojiyi kullanmalıyız. Ancak, şaşırmamak için bu uyumluluk sorununu uyarıyorum.
— AnthonyB
altında içerik varsa <h1>bir <p>ya da <div>ben kullanacağım justify-content: space-between.
— agapitocandemor
11

Kolayca esneklik elde edebilirsiniz

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>
Snippet'i genişlet

— MK Vimalan
kaynak
6

Birden çok dinamik yükseklik öğeniz varsa, tablo ve tablo hücresinin CSS görüntüleme değerlerini kullanın:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

Burada bir JSBin demosu oluşturdum: http://jsbin.com/INOnAkuF/2/edit

Demoda aynı tekniği kullanarak hizalamanın dikey olarak nasıl merkezleneceği örneği de vardır.

— romiem
kaynak
5

İşte flexbox kullanan ancak alttan hizalama için flex-end kullanmadan başka bir çözüm . Fikir kümesine olduğu margin-bottomüzerinde h1 için otomatik altına kalan içeriğe çekmek için:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>
Snippet'i genişlet

Aynı şeyi margin-top:autometinde de yapabiliriz, ancak bu durumda bunu bir divveya içine sarmamız gerekir span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}
<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>
Snippet'i genişlet

— Temani Afif
kaynak
Perfecto! gracias
— Grace Nikole
4

Bunun için mutlak + akrabaya ihtiyacınız yok. Hem kap hem de veri için göreli konum kullanmak çok mümkündür. Bunu böyle yaparsınız.

Verilerinizin yüksekliğinin olacağını varsayalım x. Kapsayıcınız göreli ve altbilgi de göreceli. Tek yapmanız gereken verilerinize eklemek

bottom: -webkit-calc(-100% + x);

Verileriniz her zaman konteynerinizin altında olacaktır. Dinamik yükseklikte kabınız olsa bile çalışır.

HTML böyle olacak

<div class="container">
  <div class="data"></div>
</div>

CSS böyle olacak

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Burada canlı örnek

Bu yardımcı olur umarım.

— Aditya Ponkshe
kaynak
Ne bottom: -webkit-calc(-100% + x);yaptığını açıklayabilir misin ?
— 16'da
mhatch altbilgi kabın altında tutar.
— Aditya Ponkshe
4

İşte bunu yapmanın esnek yolu. Tabii ki, kullanıcının 7 yıl önce ihtiyaç duyduğu gibi IE8 tarafından desteklenmiyor. Neleri desteklemeniz gerektiğine bağlı olarak, bunlardan bazıları ortadan kaldırılabilir.

Yine de, bunu dış bir kap olmadan yapmanın bir yolu olsaydı iyi olurdu, sadece metnin kendi içinde kendini hizalamasını sağlayın.

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}
— absynthe fikirli web smith
kaynak
4

çok basit, tek satırlık bir çözüm, tüm div metninin aşağıya ineceğini akılda tutarak div'e satır yüksekliği eklemektir.

CSS:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

div içindeki metnin aşağı inmesini istediğinizde bunun pratik ve hızlı bir çözüm olduğunu unutmayın, görüntüleri ve şeyleri birleştirmeniz gerekiyorsa, biraz daha karmaşık ve duyarlı CSS kodlamanız gerekir

— Pablo Contreras
kaynak
3

içeriğin sarma bölümünün yüksekliğini (başkalarının yanıtında gösterildiği gibi # başlık içeriği) ayarlayabilirseniz, # başlığın tamamı yerine, belki de bu yaklaşımı deneyebilirsiniz:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

kod alanında göster

— codeboy
kaynak
3

Çalışıyor gibi görünüyor:

HTML: En alttayım

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}
— Yönetici Dosyası3
kaynak
3

Tüm bu cevaplar ve hiçbiri benim için işe yaramadı ... Ben flexbox uzmanı değilim, ama bunun anlaşılması oldukça kolaydı, anlaşılması ve kullanımı kolay. İçeriğin geri kalanından bir şey ayırmak için boş bir div ekleyin ve alanı doldurmak için büyümesine izin verin.

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

Bu, taban içeriği sabit boyutta olmadığında, kap sabit boyutta olmadığında da beklendiği gibi tepki verir.

— Mozfet
kaynak
3

Bahsedilenlerden çok daha basit bir yol tasarladım.

Div başlığının yüksekliğini ayarlayın. Ardından, H1etiketinizi aşağıdaki gibi stilize edin:

float: left;
padding: 90px 10px 11px

Bir istemci için bir site üzerinde çalışıyorum ve tasarım metnin belirli bir div altında olmasını gerektirir. Bu iki çizgiyi kullanarak sonuca ulaştım ve iyi çalışıyor. Ayrıca, metin genişlerse, dolgu yine aynı kalır.

— mickburkejnr
kaynak
1
Duyarlı düzenleri kullanarak ekranları yeniden boyutlandırırken içeriğin diğer içerik üzerinde kaydırılmasına neden olur.
— Mozfet
2

Bu çözümü varsayılan bir bootstrap başlangıç ​​şablonuna dayandırdım

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}
— XMaster
kaynak
2 
#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}
<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>
Snippet'i genişlet

— user841657
kaynak
1
Bu, üst div'in yeniden boyutlandırılmasına neden olur. Hangi temel metin düzenleri için çalışır, ancak şeyler arka planlar ve renkler ve saygı duyulması gereken boyutlar olduğunda çalışmaz.
— Mozfet
0

ile dene:

div.myclass { margin-top: 100%; }

düzeltmek için% değerini değiştirmeyi deneyin. Örnek:% 120 veya% 90 ... vb.

— felix
kaynak
1 içerik seti ile mükemmel çalışır, ancak içerik değişirse ayarlanması gerekir. Dinamik içerikse, bunu kullanmayın!
— Mike Graf
0

Bir müşteri için yaptığım site, altbilgi metninin yüksek bir kutu olmasını istedi, alt kısımdaki metinle basit dolgu ile bunu başardım, tüm tarayıcılar için çalışmalıdır.

<div id="footer">
  some text here
</div>
#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}
— Nicki L. Hansen
kaynak
1
İlk beyanınız padding: 0 30pxbiraz fazla, padding: 30pxdiğer 2 beyanı da koymuş olabilirsiniz .
— Andrew
Kesinlikle doğru, ancak işyerimin uygulamalarını takip ediyorum.
— Nicki L. Hansen
6
Gerçekten ?, bu basit kötü bir uygulama gibi görünüyor . Sadece stenoyu kullanın veya her yerde açık olun. padding: 60px 30px 8px;, padding: 60px 30px 8px 30px;Dört açık padding-, hatta TheWaxMann önerisi @ kuralları tüm üstündür - ve onu ben ;-) tartışmaya istekli ve muktedir değilim
— Zach Lysobey
-3

Mükemmel bir çapraz tarayıcı örneği muhtemelen burada:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

Fikir hem div altta görüntülemek hem de orada yapışmasını sağlamaktır. Genellikle basit yaklaşım, yapışkan divın ana içerikle yukarı kaydırılmasını sağlar.

Aşağıda tamamen çalışan minimal bir örnek verilmiştir. Div gömme hile gerektirmez. Birçok BR sadece bir kaydırma çubuğunun görünmesini sağlar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

Kodunuzun IE üzerinde çalışmıyor olabileceğini merak ediyorsanız, DOCTYPE etiketini en üste eklemeyi unutmayın. Bunun IE üzerinde çalışması çok önemlidir. Ayrıca, bu ilk etiket olmalı ve üstünde hiçbir şey görünmemelidir.

— fakeer
kaynak
28
Belgenizi XHTML katı olarak beyan ettiğiniz için, <br />etiketlerinizi de kendiniz kapatmalısınız ...
— Amos M. Carpenter
7
@ KarlKildén aaamos'un yorumuna atıfta bulunuyorsanız, kesinlikle aptalca bir yorum değildir - yukarıdaki belgeyi doğru content-typebaşlığıyla sunmak , tarayıcının bir xml ayrıştırma hatası atmasına neden olur.
— Razor
7
Bu kötü bir uygulama! Bunun yerine CSS kullanın!
— m93a
-4

Çalışıyor gibi görünüyor:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Daha az kullanmak , CSS bulmacalarını çözmeyi kodlamak gibi yapar ... Sadece CSS'yi seviyorum. Sadece bir parametreyi değiştirerek tüm düzeni değiştirebilmeniz (kırmadan :) gerçek bir zevk.

— eSP
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.