Войти

Показать полную графическую версию : [решено] Высота контейнера и его заливка


System Failure
18-05-2010, 23:05
Не пойму, почему у блока "content" заливка цветом идет не полная? Ведь, вставленная таблица должна его раздвинуть, соответственно и заливка должна расшириться на всю длину и ширину контейнера.

собственно вот код:


<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<title>No Title</title>
<style>
body
{
margin: 0;
font-family:"Century Gothic",Arial,Helvetica,Geneva,Sans-serif;
padding-left:10%;
padding-right:10%;
background-color: #000000;
}
a
{
color:#FFFFFF;
}
#header
{
position:relative;
color:#FFFFFF;
width:100%;
height:75px;
}
#header #menu
{
color:#FFFFFF;
padding-left:0px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
text-align:left;
position:absolute;
width:auto;
height:auto;
left:0px;
bottom:3px;
}
#header #menu a#current
{
color:#FF0000;
}
#header #logo
{
font-size:58px;
letter-spacing:0.15em;
color:#FFFFFF;
text-align:right;
margin-right: 0px;
padding-right: 0px;
position:absolute;
bottom:3px;
right:0px;
width: auto;
height:auto;
}
#content
{
position:relative;
clear:both;
background:#999999;
background-color:#80807e;
color:#FFFFFF;
width:100%;
height:500px;
}
#content #leftcolumn
{
clear:both;
float:left;
width: 35%;
}
#content #maincolumn
{
float:right;
overflow: hidden;
width: 65%;
}
#footer
{
clear:both;
color:#FFFFFF;
width:100%;
height:75px;
}
#footer #downmenu
{
position:absolute;
padding-top: 3px;
}
#footer #downmenu a#active
{
color:#FF0000;
}
</style>
</head><body><div style="display: none; position: absolute; top: 0pt; left: 0pt; z-index: 90; width: 100%;" id="overlay"><a href="#"><img style="position: absolute; z-index: 150;" id="loadingImage" src="/loading.gif"></a></div><div style="display: none; position: absolute; z-index: 100;" id="lightbox"><a title="Click to close" href="#"><img id="lightboxImage"><img style="position: absolute; z-index: 200;" id="closeButton" src="/close.gif"></a><div id="lightboxDetails"><div style="display: none;" id="lightboxCaption"></div><div id="keyboardMsg">press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close</div></div></div>

<div id="header"><span id="menu"><a href="index.php?page=browse&amp;action=list&amp;orderby=DESCRIPTION&amp;group=3&amp;cat=18">Auxerrois</a>&nbsp;&nbsp;<a id="current" href="index.php?page=browse&amp;action=list&amp;orderby=DESCRIPTION&amp;group=4&amp;cat=9">Cabernet Sauvignon</a>&nbsp;&nbsp;<a href="index.php?page=browse&amp;action=list&amp;orderby=DESCRIPTION&amp;group=5&amp;cat=3">Chardonnay</a>&nbsp;&nbsp;<a href="index.php?page=browse&amp;action=list&amp;orderby=DESCRIPTION&amp;group=6&amp;cat=10">Cuvee</a>&nbsp;&nbsp;</span><span id="logo">Der Laden</span></div>
<div id="content"><script type="text/javascript" language="javascript" src="/ajax/ajax.js"></script>
<div id="leftcolumn">

<table class="datatable" width="100%">
<tbody><tr><td><a class="plain" onclick="loadContent('3&amp;cat=9&amp;group=4')" href="#"><img class="imgleft" src="prodgfx/tn_3.jpg" alt=""></a></td></tr> </tbody></table>

<div style="text-align: right;"><img src="templates/leiling/images/photo.gif" alt=""> <em><small>Die Bilder sind nicht rechtsbindend auf das Produkt!</small></em></div>



</div><div id="maincolumn">
<table class="datatable" style="position: relative;" width="85%">
<caption>Produkt Details</caption>
<tbody><tr><td>
<center>Produkt ID: 0528</center>
<div style="text-align: center;"><a href="prodgfx/3.jpg" rel="lightbox" title="Produkt ID: 0528"><img class="borderimg" src="prodgfx/3.jpg" alt="" height="317" width="450"><br><br>Klicken für Vollbild</a>
<br>

<br>
<table class="borderless" width="90%">
<tbody><tr><td class="borderless">
<div style="text-align: left;">
<em><strong>Beschreibung:</strong></em>
<ul><li><p><strong><span style="font-family: 'Century Gothic',Arial,Helvetica,Geneva,Sans-serif;">2005&nbsp;&nbsp; Cabernet Sauvignon</span></strong></p> <p><span style="font-family: 'Century Gothic',Arial,Helvetica,Geneva,Sans-serif; font-size: 12px;">FZ 0,2g/l, Säure 5,0g/l, Alkohol 12,5 % vol. </span></p> </li></ul>
</div>
</td></tr>
</tbody></table>
</div>
<br>
<form method="POST" action="index.php?page=cart&amp;action=add">
<div style="text-align: right;">
<input name="prodid" value="3" type="hidden">
<input name="prodprice" value="18.25" type="hidden">

<big><strong>Preis/Stck: ?18,25</strong></big><br><small>(?15,34 excl. Mwst)</small> <br>
<br>
Menge: <input size="4" name="numprod" value="1" maxlength="4" type="text">&nbsp;<input value="Bestellung" name="sub" type="submit">
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="footer"><span id="downmenu"><a href="index.php?page=search">Suche</a>&nbsp;&nbsp;<a href="index.php?page=browse&amp;action=shownew"><font color="red"><b>Neue</b></font> Produkte</a>&nbsp;&nbsp;<a href="index.php?page=conditions&amp;action=show">AGB</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=shipping">Versand</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=aboutus">Impressum</a>&nbsp;&nbsp;<a href="index.php?page=contact">Kontakt</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=Anfahrt">Anfahrt</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=Geschichte">Geschichte</a>&nbsp;&nbsp;<a href="index.php?page=info&amp;action=Team">Team</a>&nbsp;&nbsp;</span></div>

</body></html>



а вот схема веб страницы:
http://i50.tinypic.com/2le5p2v.png

System Failure
19-05-2010, 19:43
в общем определил, что такая ошибка имеет место быть в фаерфоксе. в ИЕ вроде все как и теоретически должно быть. вот упрощенная модель той-же ошибки, собственно:

<html>

<head>

<title></title>
<style>
#content
{
position:relative;
clear:both;
color:#FFFFFF;
width:100%;
height:500px;
background:#999999;
background-color:#80807e;
}
#content #maincolumn
{
background-color : #FF8080 ;
background : #FF8080 ;
float:right;
width: 65%;
}
</style>
<script language="javascript" type="text/javascript">
function fillWithHTML()
{
document.getElementById("maincolumn").innerHTML="<br>1<br>1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>1<br><br>1<br><br><br><br><br><br><br><br><br><br>1<br><br><br><br><br><br><br>lol";
}

</script>
</head>

<body>

<div id="content"><div id="maincolumn"></div></div>
<input type="button" value="click" onclick="fillWithHTML()">

</body>

</html>

как мы видим, высота заливки родительского контейнера не расширяется, при наполнении дочернего объекта, контентом, по высоте превосходящим родительский объект.

таким образом приходится в JS добавить строчку, динамически изменяющую высоту родительского объекта:

document.getElementById("content").style.height=document.getElementById("maincolumn").offsetHeight+10;




© OSzone.net 2001-2012