Bir div etiketi, sayfanın yüksekliğini nasıl genişletir

Question

Bunu nasıl sorabileceğimi bilmiyorum, lütfen açıklamam ve lütfen açıklamamı rica et. Bir sayfayı ortalamak ve görüntülü reklamın sağında değil, ortalanmış içerikte sağ tarafta "yan çubuk" var. Bu, elemanın viewport kadar uzun olmasını istemem dışında oldukça basit. Ancak, vücut etiketi daha uzunsa, vücut etiketi kadar uzun olmasını istiyorum. Buna ihtiyacım var çünkü kenar çubuğunun tüm görüntü alanını kapsayacak şekilde y ekseni boyunca tekrarlanması gereken bir arka planı vardır. Muhtemelen bir şey açıklamamıştım, belki de bu jsFiddle cevapsız detayları temizleyecektir.

http://jsfiddle.net/dHerb/

Ben çalışan statik bir pozisyon değere sahip .center stilini ayarlayabilirsiniz ama sonra mutlak konumlandırma kapalı atılır. Kenar çubuğunu sağa kaydırabilirdim ama yükseklik sayfayı doldurmaz. JavaScript'i kullanabilirdim, ancak özellikle de ona bağlı olan öğe sayfanın içeriğinin çeyreği kadar olduğundan, düzen için JavaScript'e güvenilmemelidir.

Herhangi bir işaretçi çok takdir edilecektir.

DÜZENLEME:% 100 yüksekliğe sahip olmak için gövde ve html etiketinin değiştirilmesi yardımcı olur, ancak yine de anlattığım gibi davranmıyor. Görüntülemenin dışında içerik varsa ve bu içeriğe ilerlerseniz, arka plan tekrarlanmayacaktır.

Answer 1

Her şeyi bir konteyner bölmesinin içine koyun. Yani, örneğin:

<div id="container" style="width:960px;"> 
    <div id="content" style="width:800px; height:100%; float:left;"> 
      Your Content 
    </div> 
    <div id="sidebar" style="width:160px; height:100%; float:left;"> 
      Your sidebar 
    </div> 
</div> 

Not: Ben örnek kodda netlik için buraya satır içi stil unsurlarını kullanılan, harici stil sayfasındaki koyun.

Bu, içeriğin ve kenar çubuğunun her zaman sayfanın tam yüksekliğiyle eşleşmesine neden olur. Gerekirse, konteyner div'in yüksekliğini elle ayarlayabilir ve her şey otomatik olarak boyutlandırılmalıdır.

Sorduğun şeyin bu olduğuna inanıyorum, yanlış yola indiğimde lütfen bana haber verin!

Answer 2

Bu, CSS 2'nin üzücü bir şekilde ele alınacak bir sorun olmadığı bir sorundur. İnsanların kullandığı standart çözüm, kenar çubuğunun arka planını kapta bir arka plan görüntüsü yapmaktır, ancak bu gerçekten çok zarif değildir.

Tek temiz çözüm sihirli flexbox biçiminde gelir. İşte kullanmak için: Sen Googleın aracılığıyla birçok başka kılavuzlar bulabilirsiniz

http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/

.

Answer 3

Bu, istediğiniz şeye yakın olabilir.

kullandığım display:inline-block;

HTML

<div id="stretched">I span from the left viewport to the right viewport.</div> 

<div id="main" class="center"> 

    <div id="left">Some text</div> 

    <div id="right">I want to be on the right side of the centered content but as tall as the taller between the body tag and the viewport.</div> 


</div> 

CSS

body { 
    padding: 0; 
} 
#stretched { 
    background-color: #ddd; 
    width: 100%; 
} 
.center { 
    margin: 0 auto; 
    width: 300px; 
    height:800px; 
} 
#main { 
    background-color: #bbb; 
} 
#right { 
    background-color: #999; 
    width: 100px; 
    display:inline-block; 
    height:100%; 
} 
#left { 
    width: 195px; 
    display:inline-block; 
    height:100%; 
    vertical-align:top; 
} 

Örnek: http://jsfiddle.net/jasongennaro/dHerb/3/

Answer 4

gi takdirde flexbox kullanmayın, konteynerin ekranını inline olarak ayarlayabilirsiniz. Demo için bkz. http://codepen.io/tommymarshall/pen/cECyH.