Adattare altezza degli elementi a quella dello schermo...?

[FenixG17]

Ciao, sono nuovo e poco pratico di HTML, spero che questa sia la sezione giusta, se così non fosse, abbiate venia.

Mi sono ritrovato, per svariate ragioni, a creare un sito in HTML su Altervista.

Data la mia poca esperienza, sono ricorso a Dynamic Drive, da cui ho preso un menù ed una slideshower, riuscendo a creare a grandi linee ciò che mi serve.

Il problema sta nel fatto che non riesco ad adattare l'altezza degli elementi a quella del monitor, cosa che sono riuscito a fare tranquillamente per la larghezza: per farlo, ho scritto, nella head:

<meta name="viewport" content="width=device-width; height=device-height ">

e, nel body ho inserito le varie grandezze in % anziché in px.

Tuttavia, come ho detto, la cosa non funziona per la proprietà height, che, se impostata in %, mi restituisce risultati anomali: la slideshower scompare, mentre il box di testo accanto si riduce al minimo.

Qualcuno può aiutare?

Lascio i codici relativi a questi ultimi due elementi, nel caso servano:

Slideshower (head):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- optional touchswipe file to enable swipping to navigate slideshow -->
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

<style>

#fadeshow4 .gallerylayer img{ /* make all images inside fadeshow4 scale to 100% of slideshow width */
width: 100%;
height: 100%;
}

</style>

<script type="text/javascript" src="fadeslideshow.js">

</script>

<script type="text/javascript">



var mygallery4=new fadeSlideShow({
wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
dimensions: ['50%', 500 ], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["1.jpg", "", "", "There is beauty to be found in nature not just in grand landscapes, but in the petals of an unassuming flower"],
["2.jpg", "", "", "The iconic telephone booths of London now in a very unfamiliar place."],
["3.jpg", "", "", "A piano not played is a piano that's wasting away. "],
["4.jpg", "", "", "A piano not played is a piano that's wasting away. "],
["5.jpg", "", "", "A piano not played is a piano that's wasting away. "],
["7.jpg", "", "", "A piano not played is a piano that's wasting away. "],
["8.jpg", "", "", "A piano not played is a piano that's wasting away. "],
["6.jpg", "", "", "A piano not played is a piano that's wasting away. "],
["9.jpg", "", "", "Alone and being lonely. It's a state of mind. Which one does this image evoke in you?"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow4toggler"

})

</script>

Slideshower + box di testo (body)

<div id="fadeshow4" style="float: left; margin-left:20%; margin-top:5% " > </div>

<table width="10%" align="left" height= "0" bgcolor="black" border="0" style="margin-left:1%; margin-top: 5%"><tbody>
<tr>
<td width="30%" bgcolor=" grey"> <strong> <font color="white" style="-webkit-text-stroke: black 0px"> <marquee scrollamount="3" direction = "up" loop="-1" align="center" height=490px width="200"> TESTO </marquee></font></strong></td>
</tr>
</tbody></table>

<div id="fadeshow4toggler" style="width:50%; text-align:center; margin-top:1%; margin-left:20%; border: 2px" >

<a href="#" class="prev"><img src="http://www.dynamicdrive.com/dynamicindex14/left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://www.dynamicdrive.com/dynamicindex14/right.png" style="border-width:0" /></a>

</div>

Confido in una risposta.

[lucavizzi]

Se vuoi applicare delle altezze percentuali agli elementi, devi impostare una height:100% al tag body (Altrimenti il browser non sa su cosa calcolare la percentuale).
Detto in soldoni, il tuo CSS dovrà contenere la regola:

<style type="text/css">
html,body{
    height:100%;
}
</style>