Hello, I go by the name of Shohel Rana. For quite some time now, I've been grappling with a persistent issue that seems to have no clear solution.
The crux of the problem is as follows:
I have three rows in this setup. The first and third rows should adjust their heights based on their content. However, the second row needs to adapt its height to fill the remaining space available.
Below is an illustration showcasing my dilemma:
What I aim for is for the end result to resemble the following:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e18b9094849398a1d3cfd0cfd0">[email protected]</a>" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row row-1">
<div class="col-md-4">ROW1 COLUMN1</div>
<div class="col-md-4">ROW1 COLUMN2</div>
<div class="col-md-4">Lorem ipsum dolor sit amet
Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem ROW2 COLUMN1 ROW3 COLUMN1 ROW3 COLUMN2 Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodommodum dolore labitur Nihil vivamus vocant similique meditari
</html>
CSS:
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.container-fluid {
background-color: gray;
height: 100%;
}
.row-1 {
background-color: #b200ff;
margin-bottom: 5px;
}
.row-1 > .col-md-4 {
background-color: #0094ff;
border: 1px dashed #111010;
text-align: center;
}
.row-2 {
background-color: #b6ff00;
margin-bottom: 5px;
}
.row-2 > .col-md-12 {
background-color: #ff6a00;
border: 1px dashed #111010;
text-align: center;
}
.row-3 {
background-color: #00ff21;
}
.row-3 > .col-md-4 {
background-color: #00ffff;
border: 1px dashed #111010;
text-align: center;
}
Precaution:
- Avoid display: table, table-row, and table-cell.
- Avoid JavaScript code.