Mevcut dikey alana sığacak şekilde bir div genişletme nasıl yapılır?

Başlığımı ve altbilgimi ekledikten sonra kalan alanı sığacak şekilde genişletmek için ana sayfa içeriğimi içeren div yapmanın bir yolunu arıyorum. HTML böylece gibi dışarı atılır: altbilgi% 100'e #wrapper min-height ayarlayarak sayfanın alt geçmiş zaman böyleceMevcut dikey alana sığacak şekilde bir div genişletme nasıl yapılır?

<div id="wrapper"> 
    <div id="header-wrapper"> 
     <header> 
      <div id="logo-bar"></div> 
     </header> 
     <nav></nav> 
    </div> 
    <div id="content"></div> 
</div> 


<div id="footer-wrapper"> 
    <footer></footer> 
</div>

O tasarlanmıştır. Sorun, #wrapper'ın içindeki boş alanı doldurmak için #content'ın genişlememesi ve istediğim görünümü elde etmemesidir. Bunu nasıl yapabilirim?

kaynak

2010-02-28 vilhalmer

EDIT:
Neden üst ve alt kullanmayın. İşte tam bir örnek.
Üstbilgi/altbilgi yerleşimini optimize etmek için üst ve alt değerleri ayarlayabilirsiniz. http://www.alistapart.com/articles/footers/

Size genişleyen içerik div ile altta bir altbilgi konumlandırmak nasıl gerçek bir örnek vardır:

<html> 
<head> 
    <style type="text/css"> 
    BODY { 
    margin: 0; 
    padding: 0; 
    } 

    #wrapper { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    } 

    #header-wrapper { 
    position: absolute; 
    background-color: #787878; 
    height: 80px; 
    width: 100%; 
    } 

    #content { 
    position: absolute; 
    background-color: #ababab; 
    width: 100%; 
    top: 80px; 
    bottom: 50px; 
    } 

    #footer-wrapper { 
    position: absolute; 
    background-color: #dedede; 
    height: 50px; 
    width: 100%; 
    bottom: 0; 
    } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="header-wrapper"> 
     <div id="header"> 
     <div id="logo-bar">Logo</div> 
     </div> 
     <div id="nav"></div> 
    </div> 
    <div id="content">Content</div> 
    <div id="footer-wrapper"> 
     <div id="footer">Footer</div> 
    </div> 
    </div> 
</body> 
</html>

kaynak

2010-02-28 16:28:01 Zyphrax

IE6 ve tuhaflıklar modunda IE7/8'de sorunlara neden olmaktadır. OP'nin bunları destekleyip desteklemediğini bilmiyorum. –

Üst/alt kullanımı iyi bir fikir, her zaman bunları unutuyorum. Detaylı cevap için teşekkürler! – vilhalmer

Bu üst/alt teknik, sabit genişlikli ortalanmış 960 içerik div ile mümkün mü? –

altbilgiler için iyi bir makale dışında A List yer almaktadır.

kaynak

2010-02-28 16:37:38 Patrick

Harika bir yazı, bunun için teşekkürler. – vilhalmer

Bu çözüm, kaydırma sorunlarını çözer. sayfa büyük boy olduğunda, altbilgi 2 yeni tüm içerikten çizgiler yerleştirilir: Bir `div` üzerinde ** alt özelliklerini üst ** hem kullanma

<style> 
     #container { 
     position: relative; 
     height: 100%; 
    } 
    #footer { 
     position: absolute; 
     bottom: 0; 
    } 
    </style> 

    </HEAD> 

    <BODY> 

    <div id="container"> 

     <h1>Some heading</h1> 

    <p>Some text you have</p> 

    <br> 
    <br> 

    <div id="footer"><p>Rights reserved</p></div> 

    </div> 

    </BODY> 
    </HTML>

kaynak

2017-09-09 16:04:58 LuckyLuke82

Mevcut dikey alana sığacak şekilde bir div genişletme nasıl yapılır?

cevap

İlgili konular