Automatyczna wysokość DIV

0

Witam serdecznie - mam taki problem: Jest stronka z DIVEM, w ktorym jest tabela - pytanie jak zrobić, żeby div (ktorego tłem jest obrazek jpg) wydłuzal sie automatycznie w miare dodawania wierszy do tabeli? Poniżej kod:

Stronka:

<%@ page language="java" contentType="text/html; charset=ISO-8859-2"
    pageEncoding="ISO-8859-2"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
        <link rel="Stylesheet" type="text/css" href="CSS/Wspolne.css" />
        <link rel="Stylesheet" type="text/css" href="CSS/Ankieta.css" />
        <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
        <title>Menu</title>
    </head>
    
    <body>
    
    <%
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    String czy_zalogowany=(String)session.getAttribute("uzytkownik");
    String czy_zle_dane=request.getParameter("czy_blad");
    %>
        <div id="Gorna_stopka">
        </div>        
        <div id="Glowny">
        	<div id="Menu">
            	<script type="text/javascript">
                AC_FL_RunContent( 'type','application/x-shockwave-flash','data','Flash/Menu.swf','width','317.9','height','50','movie','Flash/Menu' ); //end AC code
            	</script><noscript><object type="application/x-shockwave-flash" data="Flash/Menu.swf" width="317.9" height="50">
                    <param name="movie" value="Flash/Menu.swf" />
            	</object></noscript>
        	</div>
            
            <div id="Tabela">
            	<table width="850" border="7" align="left" cellpadding="1" cellspacing="4" bgcolor="#E1EAEA">
                                <tr bordercolor="#0000CC" bgcolor="#FFFFCC">
                                    <th width="89"><span class="styl16"> IMIĘ</span></th>
                                    <th width="89"><span class="styl16"> NAZWISKO</span></th>
                                    <th width="60"><span class="styl16"> WYDZIAŁ</span></th>
                                    <th width="30"><span class="styl16"> FOTO</span></th>
                                </tr>
                                
                                <tr>
                                <td>aaa</td>
                                </tr>
                                <tr>
                                <td>aaa</td>
                                </tr>
                               ....itd itp
                </table>
            </div>           
        </div>
        <div id="Dolna_stopka">
            <p>Uniwersytet Zielonogórski Ankiety 2009 Copyright by Matthew
        </div>
    </body>
</html>

Tabela jest w Divie "Glowny" - poniżej CSS tego diva:

@CHARSET "UTF-8";

#Glowny{
    position:relative;
    background:url(../Obrazy/TloStronyAnkieta.jpg) no repeat;
    width:990px;
    padding:0;
    margin:0 auto;
    height:auto;
    z-index:2;
    border:none;
    margin-top:0px;
}

#Tabela{
    position:absolute;
    background-color:none;
    width:700px;
    z-index:3;
    padding:10px;
    border:none;
    text-align:left;
    left:60px;
    margin-top:250px;
}

#Jak_wypelniac{
	position:absolute;
    background-color:none;
    width:300px;
    z-index:3;
    height:440px;
    padding:10px;
    border:none;
    text-align:left;
    right:95px;
    margin-top:285px;
    	
}
0

ktoś zaradzi?

0

Temat nieaktualny - zastosowałem overflow:scrollbar

0

Ech :) Czyli wszystko tak jak kolega niżej napisał.

0

To raczej złe podejście. W ogóle nie powinieneś mieć problemów z takimi rzeczami, ponieważ domyślnie element div wydłużałby się w miarę dodawania czegoś do jego zawartości.

Ale sam się oczywiście wkopałeś :), dając tabeli position: absolute;. Ta deklaracja wyciąga tabelę z normalnego biegu dokumentu. IMO trzeba było skasować to position: absolute;, być może też kasując duży margin-top: 250px; (nie wiem, czy chciałeś mieć tam taki duży margines, czy zastosowałeś to, żeby zniwelować position: absolute).

Generalnie w większości przypadków w CSS nie powinno się używać pozycjonowania bezwzględnego (position: absolute), bo ono sprawia, że element zostaje wyciągnięty z normalnego przepływu dokumentu i przestaje wpływać na inne elementy. Należy nie robić nic (co jest równoważne z position: static), ewentualnie -- czasami -- użyć pozycjonowania względnego (position: relative) czy nieraz position: fixed gdy akurat takiego efektu potrzebujesz. A kilka położonych obok siebie kolumn przeważnie robi się używając pływania (własność float).

Pozycjonowanie bezwzględne to przydatne narzędzie, ale stosowanie go wszędzie gdzie się da z braku znajomości innych rozwiązań zwykle kończy się niedobrze.

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