28172 sujets

CSS et mise en forme, CSS3

Comment avoir une hauteur de "span" 100% sur tout l'écran?

Bonjour,

a priori la chose semble aisée, mais je bute depuis plusieurs jours...Voici le problème :

Sur mon site, j'ai un écran d'accueil très simple :

- une image de fond en cover

- un bandeau vertical ("span4 offset 6") en transparence qui est là en guise de navbar

Cf. ici

Le problème est que je n'arrive pas à faire descendre automatiquement ce bandeau en "margin-bottom: 0px;" ; je voudrais en effet que ce bandeau vienne se coller en bas sur n'importe quelle taille d'écran. En bidouillant le CSS (feuille de style Bootstrap), je parviens à imposer un collage en haut ("margin-top: -20px;"), mais rien ne semble forcer le "margin-bottom" à se coller en bas. Je peux bien forcer la taille du "span" en lui imposant une hauteur fixe en px mais ce n'est vraiment pas l'idéal en termes de propreté et d'affichage universel... Bref, voici les codes :

HTML

<!DOCTYPE html>
<html lang="en">
   
  <head>
    <meta charset="utf-8">
    <title>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="roland barthes litterature francaise seminaire archive bibliographiess">
    <meta name="author" content="mathieu messager">
    <!-- Le styles -->
    <link href="static/css/webbootstrap.css" rel="stylesheet">
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/jquery.fancybox.css">
     <link rel="stylesheet" type="text/css" href="static/source/jquery.fancybox.css?v=2.1.5" media="screen">
      <link rel="stylesheet" href="static/source/helpers/jquery.fancybox-thumbs.css">
     
  
    
    <style>
     
 
body {
  background: url(static/img/imagefond.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top:0px;
  margin-bottom:0px;
   
  } 
  
      /* a .nav h4 */
     
    </style>
    <link href="static/css/bootstrap-responsive.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
      </script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="icon" type="image/png" href="static/img/favicon.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
    <style>
    </style>
     
   
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-44469191-1', 'roland-barthes.org');
  ga('send', 'pageview');
 
</script>
 
 
  </head>
  <body>
   
              
      
  <p><div class="row">
 <div class="span6bis offset6">
 <p style="text-align:center"><img src="static/img/logoweb.png" alt=""><p/>
 <p style="text-align:center"><a class="ex1" href="revue.html">Revue</a><br><br><a class="ex1" href="recensions.html">Bibliographie</a><br><br><a class="ex1" href="corpusbarthes.html">Indexation</a><br><br><a class="ex1" href="portailaudio.html">Archives</a><br><br><a class="ex1" href="iconobis.html">Iconographie</a><br><br><a class="ex1" href="seminaire.html">Séminaire</a><br><br><a class="ex1" href="reseau.html">Réseau</a><br><br><a class="ex1" href="agenda.html">Agenda</a><br><br><a class="ex1" href="newsletter.html">Newsletter</a><br><br><a class="ex1" href="https://www.facebook.com/pages/roland-barthesorg/667300796616928"><img src="static/img/facebook24.png" hspace="10px;"></a><a class="ex1" href="https://twitter.com/barthes_org"><img src="static/img/twitter24.png" hspace="10px;&gt;</a><a class="ex1" href="mailto:contact@roland-barthes.org"><img src="static/img/mail24.png" hspace="10px;"></a><br><br> <p style="text-align:center; font-size:12px;">www.roland-barthes.org /2013-2014</p>
 <br><br>
 </div>
    </div>
   
 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script src="static/js/bootstrap.js"></script>
   <script type="text/javascript" src="static/source/jquery.fancybox.js?v=2.1.5"></script>
   <link rel="stylesheet" href="static/source/helpers/jquery.fancybox-thumbs.js">
   
      
  </body>




CSS

.span6bis {
  width: 460px;
  min-height:100%;
  background-color: rgba(255,255,255,0.5);
  margin-top: -20px;
  margin-right:0px;
  margin-bottom: -20px;
}


Seule une intervention sur le "span" semble opérer, les bidouillages sur le "row" ou le "body" ne changent pas grand chose.

Merci pour vos conseils éclairés!

Mathieu
Modifié par Albucius (02 Apr 2014 - 14:50)
Sujet clos
Aller à