Before jumping to conclusions and marking this question as a duplicate, I want to clarify that I have already explored all suggestions provided on Stack Overflow, including the use of display: table. Unfortunately, none of them seem to work smoothly with Bootstrap.
My goal is to achieve a layout structure as depicted below:
---------------------
| Nav Bar |
|-------------------|
| |Body | |
| | | |
|______|_____|______|
| | | |
| | | |
|______|_____|______|
The navbar should remain fixed at the top. The body section below should be divided into 6 sub-divs, each occupying 4 columns in width.
The height of the body section needs to adapt dynamically based on the remaining space after accommodating the navbar, which may vary upon resizing.
To ensure maximum browser compatibility, I am looking for a CSS-only solution and steering clear of the flexbox approach.
Below is the snippet of code I am currently using:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom Styles -->
<style>
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
}
.first_wrapper {
padding: 0px;
margin: 0px;
}
.navbar {
margin: 0px;
}
</style>
<!-- jQuery and Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid first_wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Admin Page</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" style="height:100%;width:100%;padding:0px;margin:0px;">
<div class="row" style="height:100%;width:100%;padding:0px;margin:0px;">
<div class="row" style="height:50%;width:100%;padding:0px;margin:0px;">
<div class="col-lg-4" style="height:100%;background-color:red;"></div>
<div class="col-lg-4" style="height:100%;background-color:green;"></div>
<div class="col-lg-4" style="height:100%;background-color:pink;"></div>
</div>
<div class="row" style="height:50%;width:100%;padding:0px;margin:0px;">
<div class="col-lg-4" style="height:100%;background-color:green;"></div>
<div class="col-lg-4" style="height:100%;background-color:red;"></div>
<div class="col-lg-4" style="height:100%;background-color:blue;"></div>
</div>
</div>
</div>
</body>
</html>Any content following the "Second Container" comment should automatically adjust its height accordingly.