Div w divie: 100% wysokości

0

Witam serdecznie jako nowy użytkownik forum. Mam nieśmiertelny problem - chciałem aby div #nav miał 100% wysokości diva rodzica #bottom, który rozszerza się tak jak #content (te divy są na końcu kodu css). Oto kod:

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="Stylesheet" type="text/css" href="style.css" />
    <title>Tytuł strony</title>
</head>
<body>

<div id="center">
    <div id="logo">
        <div id="menu">
            &nbsp;
        </div>
    </div>
    <div id="offer">
        <div id="offer-a">
            <div><p>Box1</p></div>
            <div><p>Box2</p></div>
            <div><p>Box3</p></div>
        </div>
    </div>
    <div id="bottom">
        <div id="nav">
            <h4>Lorem ipsum...</h4>
            <ul>
                <li> 1</li>
                <li> 2</li>
                <li> 3</li>
                <li> 4</li>
                <li> 5</li>
            </ul>
        </div>
        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend, libero eget porta pulvinar, tellus elit consectetur nulla, in pretium elit nulla a nisl. Aliquam non dui lacus. Mauris pulvinar rhoncus velit, et blandit nibh pharetra viverra. Proin at lacinia ipsum. </p>
            <p>Ut risus justo, mattis vel condimentum sit amet, varius vel ipsum. Etiam ligula est, pellentesque viverra egestas dapibus, ullamcorper eu lorem. Vivamus vel augue vel nunc vehicula dignissim non quis odio. Praesent hendrerit accumsan odio, in tincidunt elit ullamcorper nec. Donec hendrerit fermentum diam eget sagittis. Sed bibendum congue tempor. Mauris ac massa ante, non pulvinar tortor. Morbi quis varius turpis. </p>
            <p>Donec tincidunt mollis turpis laoreet tempor. Maecenas malesuada blandit nunc blandit lobortis. Integer leo libero, elementum a congue nec, lacinia tempor tortor. Suspendisse arcu dolor, lobortis id auctor a, dapibus et nibh. Nulla vel lectus mi, rhoncus aliquam purus. Cras bibendum velit eu velit imperdiet ac lacinia felis congue. Nullam quam mauris, euismod non accumsan et, auctor a tellus. Suspendisse potenti. Maecenas augue velit, ornare quis congue in, facilisis sed odio. Donec malesuada, est id euismod rhoncus, justo felis imperdiet libero, vel malesuada nisl risus eget enim. Sed id eros eget arcu laoreet cursus vitae et tellus. Nunc pretium tempor aliquet.</p>
        </div>
    </div>
    <div style="clear:both"> </div>
</div>

</body>
</html>

i CSS:

body, html {
    margin:0px;
    min-height:100%;
}

body {
    background: url("images/background.png") #141211;
    color: #000;
    font-family: sans-serif;
}

#center {
    width:1000px;
    overflow: hidden;
    min-height:100%;
    margin: auto;
    background:white;
}

#logo {

    padding-top:12px;
    height:438px;
    border-bottom: 7px solid #40648b;
    background: #5787bc url("images/top.png");  
}

#logo #menu {
    background:#336699;
    height:55px;
    border-top:1px solid #325780;
}

#offer {
    height:375px;
    background: #dadada;
    border-bottom: 3px solid #b6b6b6;   
}

#offer-a {
    padding-top:20px;
    margin:auto;
}

#offer-a div {
    width: 330px;
    height: 330px;
    background: url("images/offer.png");
    display:table-cell;
}

#offer-a p {
    width: 300px;
    height: 300px;
    background:white;
    margin:auto;
    border:1px solid black;
}

#nav {
    padding-left:15px;
    width:285px;
    float:left;
    background:yellow;
}

#content {
    padding-left:15px;
    width:650px;
    float:left;
}
1

Dopisz to do css-ów:

#bottom { display: table-row; }
#nav, #content { display: table-cell; float: none; }

Być może będziesz miał inne niż oczekiwane efekty, jeżeli w #nav lub #content będzie element o szerokości większej niż rodzic - overflow: hidden; temu zaradzi - ale oczywiście przytnie elementy. Jak nie chcesz przycinania w takim wypadku, a namiesza Ci z szerokością, to będziesz musiał owinąć nawigację i treść jeszcze czymś, temu czemuś dać display: table-row, a #bottom wtedy display: table oraz: table-layout: fixed;.

Widziłem jakieś hacki na równą wysokość floatowanych elementów, ale to jest najprostsze.

0

Dziękuję bardzo :-) Działa, póki co jak należy

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0