Slider y propiedad bottom

[conotrocolor]

Hola, que tal, es mi primer tema, y mi primer posteo, pero como muchos, he usado y probado muchas de las aplicaciones y temas que en estos foros se debaten.

mi consulta es la siguiente:


quiero hacer algo como tiene [URL="http://www.adidas.com.ar"]adidas[/URL]

yo tengo un encabezado y un slider, pero me es dificil indicarle al slider que tiene q ser lo suficientemente alto como para tapar la primer "impresion" de la pagina hasta que le hagan "scroll". (funcionando con cualquier resolucion de pantalla)
El ancho lo solucioné dandole la propiedad "width=100%", pero aca la cuestión es el alto.



mi slider

Código HTML:

<div id="black-box">
<div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider rounded">
            <img src="library/images/slider/01-wireless.jpg" alt="" title="holaaa" />
            <img src="library/images/slider/02-wireless.jpg" alt="" title="chau"/>
            <img src="library/images/slider/03-wireless.jpg" alt="" title="como estas"/>
        </div>
    </div>
</div>
 

mi css

Código CSS:

/*
 * jQuery Nivo Slider v3.0.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* The Nivo Slider styles */
.nivoSlider {
    position:absolute;
    width:100%;
    overflow: hidden;
    height:780px;
    
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
 
 
 
}
 
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }
 
/* Caption styles */
.nivo-caption {
    position:absolute;
    right:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:600px;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
}
.nivo-controlNav a {
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
 

como veran el height= le puse "780px" por son los pixeles para q yo con la pagina maximizada lo vea bien, pero ese alto es el que tiene q se el resultado del total de la primer impresion de la pantalla menos el encabezado q sera de uno "300px" aprox.