+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu] Probleme [CSS] espace entre main et footer non désiré (/showthread.php?tid=7248)
[Résolu] Probleme [CSS] espace entre main et footer non désiré - michoxstar - 09-11-2014
Bonjour, je vous contacte car je plante avec un problème sur mon design... :
Il faudrai que le <main> prenne toute la hauteur peu importe la hauteur de screenshot par exemple...
Voici un résumé du soucis :
![[Image: img.png]](http://casino-wars.fr/img.png)
PAGE CSS :
Code :
body {
overflow-y: scroll;
}
/* Layout Module Configuration & fallback for unsupported media queries */
.ym-wrapper {
min-width: 100%;
max-width: 100%;
margin: 0 auto;
}
.ym-wbox {
padding: 0px;
}
/* Basic Element Styling */
header {
background:url(../../img/fond_header.png);
background-repeat:repeat-x;
color: #ccc;
padding: 6em;
}
.cartes_jeu {
position:absolute;
top:15px;
left:528px;
}
.logo {
position:absolute;
top:17px;
left:50px;
}
nav {
background: #222222;
}
main {
padding: 2em 0 0em 0;
background:url(../../img/fond_content_fond.png);
background-repeat:repeat;
}
footer {
position:fixed;
bottom:0;
margin: 0;
background:url(../../img/fond_footer.png) repeat-x;
color: #fff;
padding: 0.8em;
width:100%;
}
footer p {
margin: 0;
}
/* Column-Set Configuration: 1-3 (sidebar right) */
.ym-column {
display: block;
overflow: hidden;
padding-right: 340px;
width: auto;
}
/* content - column */
.ym-col1 {
float: left;
width: 100%;
}
/* sidebar - column */
.ym-col3 {
position: relative;
float: left;
width: 340px;
margin-left: 0;
margin-right: -340px;
}
.ym-col1 .ym-cbox {
padding: 0 0.75em 0 1.5em;
}
.ym-col3 .ym-cbox {
padding: 0 20px 0 12px;
}
.ym-gbox {
padding: 0 1.5em 0 0;
}
/* skip links styling */
.ym-skiplinks a.ym-skip:focus,
.ym-skiplinks a.ym-skip:active {
color: #fff;
background: #333;
border-bottom: 1px #000 solid;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
}
/* reset fallback values in modern browsers */
@media screen and (min-width: 0px) {
.ym-wrapper {
min-width: 0px;
}
}
@media screen and (max-width: 760px) {
/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
.linearize-level-1, .linearize-level-1 > [class*="ym-c"], .linearize-level-1 > [class*="ym-g"] {
/* linearization for grids and columns module */
display: block;
float: none;
padding: 0;
margin: 0;
width: auto !important;
}
.linearize-level-1 > [class*="ym-c"] > [class*="ym-cbox"], .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
/* reset defined gutter values */
margin: 0;
padding: 0;
/* optional for containing floats */
overflow: hidden;
}
nav .ym-hlist ul {
padding-right: 10px;
}
.ym-searchform {
display: block;
float: none;
width: auto;
padding-right: 10px;
text-align: right;
}
.ym-searchform input[type="search"] {
width: 14%;
}
}
@media screen and (max-width: 480px) {
.ym-wbox {
padding: 0;
}
header {
padding: 0.75em 10px;
}
header h1 {
font-size: 1.5em;
line-height: 1em;
margin: 0;
}
footer,
main,
.ym-searchform,
nav .ym-hlist ul {
padding-left: 10px;
padding-right: 10px;
}
/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */
.linearize-level-2, .linearize-level-2 > [class*="ym-c"], .linearize-level-2 > [class*="ym-g"] {
/* linearization for grids and columns module */
display: block;
float: none;
padding: 0;
margin: 0;
width: auto !important;
}
.linearize-level-2 > [class*="ym-c"] > [class*="ym-cbox"], .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"] {
/* reset defined gutter values */
margin: 0;
padding: 0;
/* optional for containing floats */
overflow: hidden;
}
.ym-searchform,
nav .ym-hlist ul,
nav .ym-hlist li {
display: block;
float: none;
width: auto;
text-align: left;
}
.ym-searchform input[type="search"] {
width: 75%;
}PAGE HTML
Code :
<body>
<ul class="ym-skiplinks">
<li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>
<li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>
</ul>
<div class="ym-wrapper">
<div class="ym-wbox">
<header>
<img src="img/cartes_jeu.png" alt="Logo" class="cartes_jeu" />
<img src="img/logo.png" alt="Logo" class="logo" />
</header>
<nav id="nav">
<div class="ym-hlist" >
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Inscription</a></li>
<li><a href="#">Mot de passe oublié ?</a></li>
<li><a href="#">Contactez-nous</a></li>
<li><a href="#">Partenaires</a></li>
</ul>
<form class="ym-searchform">
<input class="ym-searchfield" placeholder="LOGIN" />
<input class="ym-searchfield" placeholder="MOT DE PASSE" />
<input class="ym-searchbutton" type="submit" value="CONNEXION" />
</form>
</div>
</nav>
<main>
<div class="ym-column linearize-level-1">
<div class="ym-col1">
<div class="ym-cbox">
<section class="box info">
<h2>Bienvenue sur JEU!</h2>
<p>JEUJEU est un jeu de gestion de blabla virtuel en ligne, ce jeu est gratuit et jouable depuis votre navigateur web.<br>Dans ce jeu vous incarnez la gérance, c'est à vous que reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipstcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera</p>
<a class="ym-button ym-next" href="#">Description détaillée</a>
</section>
<div align="center"><img src="http://dummyimage.com/970x90/cccccc/fff.png" alt="ads" class="bordered"/></div>
</div>
</div>
<aside class="ym-col3">
<div class="ym-cbox">
<h4>Screenshots</h4>
<div class="ym-contain-dt">
<div align="center">
<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
</div>
</div>
</div>
</aside>
</div>
</main>
<footer>
<p>© <a href="http://www.casinogre.com">JEU</a> 2014 – Tous droits réservés – Design inspiré de <a href="http://www.yaml.de">YAML</a></p>
</footer>
</div>
</div>
<!-- full skip link functionality in webkit browsers -->
<script src="js/yaml-focusfix.js"></script>
</body>Merci de votre lecture
RE: Probleme [CSS] espace entre main et footer non désiré - @lucard - 09-11-2014
As-tu essayé :
.main{height:100vh;}
?
RE: Probleme [CSS] espace entre main et footer non désiré - michoxstar - 09-11-2014
Merci @lucard en height:65vh c'est parfait, pas de scroll...
Merci encore !!!
Résoooolu.
RE: [Résolu] Probleme [CSS] espace entre main et footer non désiré - @lucard - 10-11-2014
Pas de quoi. Attention à toutefois à la compatibilité. Il.s'agit de css3.
Plus d'info ici:
http://dev.w3.org/csswg/css-values/#relative-lengths
RE: [Résolu] Probleme [CSS] espace entre main et footer non désiré - Wells - 12-11-2014
vh, tient je connais pas, c quoi en fait ?
RE: [Résolu] Probleme [CSS] espace entre main et footer non désiré - @lucard - 12-11-2014
(12-11-2014, 11:34 AM)Wells a écrit : vh, tient je connais pas, c quoi en fait ?
(10-11-2014, 07:26 PM)@lucard a écrit : Il.s'agit de css3.
Plus d'info ici:
http://dev.w3.org/csswg/css-values/#relative-lengths
Citation :unit: relative to :
vw 1% of viewport’s width
vh 1% viewport’s height
vmin 1% of viewport’s smaller dimension
vmax 1% of viewport’s larger dimension
RE: [Résolu] Probleme [CSS] espace entre main et footer non désiré - Prélude - 12-11-2014
Vous avez le site CanIUse également qui vous permet de voir sur quels navigateurs un élément est possible ou non : http://caniuse.com/#search=vh