FULL DIV screen background color

Question

webmaster83

28 Aug 2020 à 15:05

Bonjour je n'arrive pas à faire mon cv en remplissant le div contenu gauche avec la même couleur jusqu'en bas ( toute la hauteur de l'écran ) svp aidez moi !

copier coller le code dans un editeur et vous allez voir (dsl si c'est trop long ) :

<title>CV Amine</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
div {
box-sizing: border-box; /* veut dire que les marges intérieur et extérieur sont comptés avec le width */
}
h1, h2 {
margin: 0px;
}
h2 {
letter-spacing: 7px;
color: #9F9F9F;
opacity: 0.5;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
span {
letter-spacing: 9px;
}
body > p {
float: right;
}
div .gauche {
min-height: 100%;
width: 30%;
background-color: cadetblue;
display: inline-block;
border-right: 2px solid gray;
vertical-align: top;
padding: 10px;

}
div .droite {
width: 69%;
background-color: bisque;
display: inline-block;
vertical-align: top;
padding: 10px;
}
#contenu {
background-color: bisque;
margin-top: 50px;
border-top: 2px solid gray;
}
div #fr {
width: 100%;
background-color: #5F5E5E;
height: 7px;
}
div #en {
width: 50%;
background-color: #5F5E5E;
height: 7px;
}
div #nl {
width: 20%;
background-color: #5F5E5E;
height: 7px;
}
</style>
</head>

<body>


<p>votre@email.com <br/>
www.votresiteweb.com </p>
<h1> Amine NACHIT </h1>
<h2>WEBMASTER Concepteur de site web </h2>
<span> <em>Développeur Front-end, autodidacte à la recherche de nouveaux défis</em></span>


<div id="contenu">

<div class="gauche">
<h3> Certificats</h3>
<p> 2018-2019 <br>
Certifié webmaster chez becode & CFITECH </p>
<h3> Projets réalisés</h3>
<a href="www.amine-nachit.be" target="_blank"> amine-nachit.be</a> <br>

<h3>Langues</h3>
<strong>français</strong>
<div id="fr"></div><br/><br/>
<strong>anglais</strong>
<div id="en"></div><br/><br/>
<strong>néérlandais</strong>
<div id="nl"></div><br/><br/>

<h3>Centres d'intérêt </h3>
<p> BD - Cinéma Sport - Voyage</p>
</div>

<div class="droite"><h3>Expériences</h3>

<table width="100%" border="0">
<tbody>
<tr>
<td width="29%" height="50"><strong>2019</strong></td>
<td width="71%">Becode Bruxelles </td>
</tr>
<tr>
<td height="50"><strong>2018</strong></td>
<td>formateur web</td>
</tr>
<tr>
<td height="50"><strong>De 2016 à 2017</strong></td>
<td>Employé administratif </td>
</tr>
<tr>
<td height="50"><strong>De 2006 à 2008</strong></td>
<td>Barman</td>
</tr>
</tbody>
</table>
<hr>
<h3> Compétences Professionnelles informatique</h3>
<table width="100%" border="0">
<tbody>
<tr>
<td width="29%" height="55"> </td>
<td width="71%"><strong>Base de donnée</strong><br>
SQL, Python</td>
</tr>
<tr>
<td height="55"> </td>
<td>Design <br> <strong>Photoshop</strong></td>
</tr>
<tr>
<td height="55"> </td>
<td><strong>Internet</strong><br>
GitHub, Basecamp, Google analytics </td>
</tr>
<tr>
<td height="55"> </td>
<td><strong>Développement web</strong><br>Bootstrap 4 , SEO, Wordpress, Joomla </td>
</tr>
<tr>
<td height="55"> </td>
<td><strong>langages de programmation</strong> <br> HTML, CSS, Jquery, SQL, PHP</td>
</tr>
<tr>
<td height="55"> </td>
<td><strong>Système</strong><br> Windows , Linux </td>
</tr>
</tbody>
</table>
<hr>

</div>
</div>
</body>

Raphael

Administrateur

28 Aug 2020 à 15:30

Hello,

C'est un boulot parfait pour Grid Layout :

#contenu {
  display: grid;
  grid-template-columns: 30% 1fr;
}

Voici ce que ça donne :
https://codepen.io/raphaelgoetter/pen/GRZERjV?editors=1100

webmaster83

28 Aug 2020 à 15:47

Bravo c'est top en + très rapide !
je met résolu ou bien il y'a d'autres réponses différentes avec le même résultat ?!
j'aimerai m'enrichir... Smiley smile

Sujet clos

CSS et mise en forme, CSS3

FULL DIV screen background color