Can someone help me achieve this specific layout design using Bootstrap 3?
---------------------------------------------------------
| | |
| | |
| | content <div> |
| | |
| | |
| sidebar | |
| <div> | |
| | ---------------------------------------|
| | |
| | input box <input> |
| | |
---------------------------------------------------------
I am not very familiar with frontend development, and I have been struggling with floating and positioning elements. Any assistance would be greatly appreciated.
HTML
<div class="container-fluid">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="content"></div>
<div class="input-box">
<input type="text"/>
</div>
</div>
</div>
CSS
.col-md-9 {
background-color: green;
height: 600px;
}
.content {
height: 550px;
background-color: blue;
}
.input-box {
margin-top: 20px;
height: 30px;
background-color: red;
}
.input-box input {
display: inline-block;
width: 100%;
height: 100%;
}
Currently, I have set fixed heights for the elements, but I would like them to extend dynamically to fill the full height of the container. Any suggestions on achieving this are welcome!
Thank you in advance!