2012-07-12 53 views
0

我正在为一位女士制作此网站,并且我在想我可能会遇到问题。它看起来像这样我的屏幕上,并且那是完美的: here获取html表格以延伸超过100%,但仅在需要时

但我认为,大多数用户对这个网站可能有较小或较旧的显示器,他们将不得不向下滚动找到底部看上去就像 this

HTML:

<div id="wrapper"> 
<table align="center" id="content" border="0" cellpadding="0" cellspacing="0" vspace="0"> 
<tr align="center" valign="top"> 

<td rowspan="2" id="pageshadow_left"></td> 

<td height="209"> 
<div style="position:relative; height:100%;"> 
<img src="textlogo.png" width="387" height="90"> 
<a href="index.php" target="_self"><div id="forside"><img src="forside.png"></div></a> 
<a href="profil.php" target="_self"><div id="profil"><img src="profil.png"></div></a> 
<a href="udstillinger.php" target="_self"><div id="udstillinger"><img  src="udstillinger.png"></div></a> 
<a href="kurser.php" target="_self"><div id="kurser"><img src="kurser.png"></div></a> 
<a href="kontakt.php" target="_self"><div id="kontakt"><img src="kontakt.png"></div></a> 
<div id="logotop"></div> 
<div id="logofront" align="right"></div> 
<div id="velkommen" align="center"></div> 
<div id="fronttextwrapper" style="position:relative"> 
<div id="fronttext" align="left"> 

<?php echo "PHP Virker!"; ?> 

<p>Drømmebilleder kalder jeg mine malerier. 
Jeg benytter stilhed, meditation og musik til skabelse af malerierne. 
De bliver hovedsageligt skabt intuitivt ud fra mine indre billeder, 
og helt naturligt vil disse billeder bl.a. være frugten af oplevelser i naturen,  inspiration fra andre kunstnere, bøger der er læst, film der er set.</p> 
<p></p> 
<p>Mine malerier har ingen titler, det er bevidst, da det er vigtigere for mig 
hvad du oplever og ikke hvad jeg føler du skal opleve, lad malerierne tale til 
dig og få din personlige drømmebilled- oplevelse.</p> 
<p></p> 

<p>Jeg underviser i at male intuitivt, så er du blevet inspireret, 
kan du kigge under kurser, Du behøver ikke at have malet før 
for at skabe dine egne drømmebilleder.</p> 
<p></p> 

<p>God fornøjelse med at kigge i galleriet, og måske på gensyn.</p> 
<p>Drude</p> 
</div> 
</div> 
</div> 
</td> 


<td rowspan="2" id="pageshadow_right";></td> 
</tr> 


</table> 
</div> 

CSS:

body, html { 
background-color:#918c8c; 
margin:0px; 
height:auto; 
padding : 0px; 
width : 100%; 
height : 100%; 
overflow:visible; 
} 

img { 
border-style:none; 
} 

#content { 
border-style:none; 
background-color:#ffffff; 
width:1050px; 
height:100%; 
margin-top:0px; 
background-image:url(top.png); 
background-position:top; 
background-repeat:no-repeat; 
margin-bottom:500px; 
overflow:visible; 
} 

#forside { 
width:128px; 
height:67px; 
position:absolute; 
top:80px; 
left:40px; 
} 

#profil { 
width:146px; 
height:68px; 
position:absolute; 
top:100px; 
left:180px; 
} 

#udstillinger { 
width:188px; 
height:61px; 
position:absolute; 
top:107px; 
left:342px; 
} 

#kurser { 
width:118px; 
height:51px; 
position:absolute; 
top:115px; 
left:540px; 
} 

#kontakt { 
width:268px; 
height:83px; 
position:absolute; 
top:74px; 
left:680px; 
} 

#logotop { 
width:50px; 
height:54px; 
background-image:url(logotop.png); 
position:absolute; 
top:5px; 
left:5px 
} 

#pageshadow_left { 
border-style:none; 
width:25px; 
background-image:url(page_shadow_left.jpg); 
background-repeat:repeat-y; 
} 

#pageshadow_right { 
border-style:none; 
width:25px; 
background-image:url(page_shadow_right.jpg); 
background-repeat:repeat-y 
} 

#velkommen { 
position:absolute; 
top:180px; 
left:103px; 
background-image:url(velkommen.png); 
width:794px; 
height:136px; 
} 

#logofront { 
background-image:url(logo.png); 
width:200px; 
height:241px; 
position:absolute; 
top:200px; 
left:760px; 
} 

#fronttext { 
position:absolute; 
top:300px; 
left:100px; 
width:450px; 
height:auto; 
text-align:left; 
font-family:"Times New Roman", Times, serif; 
font-size:18px; 
} 

#wrapper { 
height:100%; 
overflow:auto; 
} 

Anyo谁知道什么会做的伎俩?

+2

你为什么用桌子来做你的布局? 表格只能用于显示表格数据。 正常的html元素应该用于您的显示器,如divs或HTML5部分,页眉,页脚等。 – 2012-07-12 13:59:55

+0

欢迎使用stackoverflow。希望你会像我们每个人一样学习...... – 2012-07-12 21:00:04

+0

比利,其实我使用的表,因为我不知道如何居中一个div,因为它似乎是最简单的方法来添加阴影双方。我不知道使用页眉和页脚的原因。 – 2012-07-16 10:22:01

回答

0

您无法制作100%高度的桌子,您可以根据您的内容高度制作最小高度。