Issue
Here I have a simple layout that I want to design
but in my implemented CSS I can't set full height for divs
this link is what I in the code
my code result:
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.border {
border: 1px solid #000;
}
.border-red {
border-color: red !important;
}
.border-blue {
border-color: blue !important;
}
.border-green {
border-color: green !important;
}
.border-2 {
border: 2px solid #000;
}
.border-1 {
border: 1px solid #000;
}
.column {
float: left;
padding: 5px;
}
.left,
.right {
width: 20%;
}
.middle {
width: 60%;
}
.row:after {
content: "";
display: table;
clear: both;
}
.background-blue {
background-color: #b3dcff;
}
.background-green {
background-color: #b3ffd1;
}
.text-center {
text-align: center;
}
.height-50 {
min-height: 50px;
}<html lang="fa">
<head>
<title>Mahdi Pishguy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row py-3 px-3">
<div class="column text-center left background-blue">left</div>
<div class="column middle background-green text-center">
<div class="row">
<div class="">Header</div>
<div style="height: 100%;">
Content
</div>
<div class="">Footer</div>
</div>
</div>
<div class="column height-50 text-center right background-blue">right</div>
</div>
</body>
</html>Solution
To be able to make this, you have to put classes on header, content, footer and left and right. Also put a containerName class on your parent div that contains all these. Now it's too much to explain but in short words, you need to set height of all elements however you want it and spread the content how you desire.
Here is the CodePen.
Answered By - Jarne
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.