Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>correction</title>
</head>
<body>
    <header> Entête logo
    <nav>
<a href="#">Cours</a>
<a href="#">TD</a>
<a href="#">TP</a>
<a href="#">Projets</a>
​
  </nav>
</header>
  <section>
     <nav>
      Menu de taille fixe et de hauteur 100 % !!!
       <a href="#">Cours</a>
<a href="#">TD</a>
<a href="#">TP</a>
<a href="#">Projets</a>
      </nav>
    <article>Contenu
      </article>
  <section>
  
</body>
</html>
 
​
html, body {
   height : 100%;
}
​
body > section {
 display: flex;    
 height : 100%;
}
​
body > * {
  padding : 1em;
}
​
header {
  
}
​
​
article {
  flex : 8;
}
​
section nav {
  flex : none;
  padding : 10px;
  max-width : 200px;
}
​
header {
  text-align : center
}
​
​
section article {
  background: red;
  flex : 1;
}
​
body > section > nav {
  background: gold;
}
​
 header > nav {
  display: flex;
}
​
 header > nav > a {
  border : solid 1px;
  padding: 15px;
​
  margin: auto 10px;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  
  text-align: center;
  flex : 1;
​
}
 header > nav > a:first-child {
 margin-left: 0;
}
 header >  nav > a:last-child {
  margin-right: 0;
}
​
section > nav {
  //display: flex;
  flex-direction : column;
​
}
​
 section > nav > a {
  border-left : solid 1px;
  border-right : solid 5px;
  border-top : solid 1px;
  padding: 15px;
  margin-top : 1px;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  
  text-align: center;
  display : block;
​
}
 section > nav > a:first-child {
   border-top-left-radius: 15px;
   border-top-right-radius: 10px;
}
 section >  nav > a:last-child {
    border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   border-bottom : solid 1px;
}
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dupontpro
0viewers