Vous pouvez créer une bordure personnalisée en utilisant un span. Faites un span avec une classe (spécifiant la direction dans laquelle la bordure va aller) et un id :
<html>
<body>
<div class="mdiv">
<span class="VerticalBorder" id="Span1"></span>
<header class="mheader">
<span class="HorizontalBorder" id="Span2"></span>
</header>
</div>
</body>
</html>
Ensuite, allez dans votre CSS et mettez la classe à position:absolute , height:100% (pour les bordures verticales), width:100% (pour les bordures horizontales), margin:0% y background-color:#000000; . Ajoutez tout ce qui est nécessaire :
body{
margin:0%;
}
div.mdiv{
position:absolute;
width:100%;
height:100%;
top:0%;
left:0%;
margin:0%;
}
header.mheader{
position:absolute;
width:100%;
height:20%; /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */
top:0%;
left:0%;
margin:0%;
}
span.HorizontalBorder{
position:absolute;
width:100%;
margin:0%;
background-color:#000000;
}
span.VerticalBorder{
position:absolute;
height:100%;
margin:0%;
background-color:#000000;
}
Ensuite, définissez l'id qui correspond à class="VerticalBorder" à top:0%; , left:0%; , width:1%; (Étant donné que la largeur du mdiv est égale à la largeur du mheader à 100 %, la largeur sera égale à 100 % de ce que vous avez défini. Si vous définissez la largeur à 1%, la bordure sera de 1% de la largeur de la fenêtre). Définissez l'id qui correspond à l'élément class="HorizontalBorder" à top:99% (Puisqu'il se trouve dans un conteneur d'en-tête, le haut fait référence à la position dans laquelle il se trouve selon l'en-tête. La somme de cette position et de la hauteur doit être égale à 100 % si vous voulez qu'il atteigne le bas), left:0%; y height:1% (Étant donné que la hauteur du mdiv est 5 fois supérieure à celle du mheader [100 % = 100, 20 % = 20, 100/20 = 5], la hauteur sera de 20 % de celle que vous avez définie. Si vous définissez la hauteur à 1%, la bordure sera de 0,2% de la hauteur de la fenêtre). Voici à quoi cela ressemblera :
span#Span1{
top:0%;
left:0%;
width:.4%;
}
span#Span2{
top:99%;
left:0%;
width:1%;
}
AVERTISSEMENT : Si vous redimensionnez la fenêtre à une taille suffisamment petite, les bordures disparaîtront. Une solution serait de limiter la taille de la bordure si la fenêtre est redimensionnée à un certain point. Voici ce que j'ai fait :
window.addEventListener("load", Loaded);
function Loaded() {
window.addEventListener("resize", Resized);
function Resized() {
var WindowWidth = window.innerWidth;
var WindowHeight = window.innerHeight;
var Span1 = document.getElementById("Span1");
var Span2 = document.getElementById("Span2");
if (WindowWidth <= 800) {
Span1.style.width = .4;
}
if (WindowHeight <= 600) {
Span2.style.height = 1;
}
}
}
Si vous avez tout fait correctement, cela devrait ressembler à ce que vous voyez sur ce lien : https://jsfiddle.net/umhgkvq8/12/ Pour une raison étrange, la bordure disparaît dans jsfiddle mais pas si vous le lancez dans un navigateur.
