Jak rozwinąć div, aby pasował do dostępnej przestrzeni pionowej?

Poszukuję sposobu na dodanie elementu div zawierającego zawartość strony głównej do rozwinięcia, aby pasował do miejsca po dodaniu nagłówka i stopki. HTML jest określone tak:Jak rozwinąć div, aby pasował do dostępnej przestrzeni pionowej?

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

Jest zaprojektowany tak, że stopka jest zawsze obok dołu strony poprzez ustawienie MIN wysokość #wrapper do 100%. Problem polega na tym, że #content nie rozwija się, aby wypełnić puste miejsce wewnątrz #wrapper, co utrudnia uzyskanie pożądanego wyglądu. Jak mogę to zrobić?

Źródło

2010-02-28 vilhalmer

EDYTOWANIE:
Dlaczego nie używać górnego i dolnego. Oto pełny przykład.
Możesz dostosować górne i dolne wartości, aby zoptymalizować umieszczenie nagłówka/stopki.

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

Źródło

2010-02-28 16:28:01 Zyphrax

Korzystanie zarówno top ** i ** właściwości dennych na 'div' powoduje problemy w IE6 i IE7/8 w trybie quirks. Nie wiem, czy OP chce je wspierać. –

Korzystanie z góry/dołu to dobry pomysł, zawsze o nich zapominam. Dzięki za szczegółową odpowiedź! – vilhalmer

Czy technika ta jest najlepsza/najtańsza przy użyciu elementu div o wymiarach 960 o stałej szerokości? –

Dobry artykuł dla stopek jest na listę APT: http://www.alistapart.com/articles/footers/

Ma rzeczywisty przykład, w jaki sposób ustawić stopkę na dole z rozszerzającym zawartości div.

Źródło

2010-02-28 16:37:38 Patrick

Wielki artykuł, dzięki za przekazanie go dalej. – vilhalmer

To rozwiązanie rozwiązuje problemy z przewijaniem. Kiedy strona jest za duży, twoja stopka znajduje się 2 nowe linie z całą zawartością:

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

Źródło

2017-09-09 16:04:58 LuckyLuke82

Jak rozwinąć div, aby pasował do dostępnej przestrzeni pionowej?

Odpowiedz

Powiązane problemy