How to make sections height same in HTML? - html

Question

I have a web page in HTML, with different page having some sections like below image
I need every sections to be of the same height, the first section in the image is perfect with the section only till the screen, but the second section in the 2nd image is a little below the screen like below
I need it to be like the first section, till the screen. My code:
body {
font-family: Montserrat;
}
/*.paddingTB60 {padding:100px 0px 60px 0px;}*/
.gray-bg {
background: #F1F1F1 !important;
margin-top: -11vh;
padding: 19.7vh;
}
p {
overflow: hidden;
color: #0a2240;
text-align: center-left;
font-size: 12pt;
font-weight: 600;
word-spacing: 2px;
}
.para1 {
overflow: hidden;
color: #0a2240;
text-align: center-left;
font-size: 12pt;
font-weight: 600;
word-spacing: 2px;
margin-left: -2.5vh;
}
.paddingTBB {
padding-top: 95px;
padding-bottom: 30px;
}
.paddingTB {
margin-top: 50px;
}
.paddingTBq {
margin-top: 50px;
}
.paddingTBq2 {
margin-top: 100px;
}
<div id="backtop">▲</div>
<div id="zub" class="about-section paddingTB60 gray-bg">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class=" about-title clearfix">
<div class="col-md-5 col-sm-5 how-img text-center">
<img src="img/teamweserve.png" class="img-fluid" alt="" />
</div>
<div class="col-md-7 col-sm-7">
<h1 class="tws">TEAMS WE SERVE</h1><br>
<p class="para1">CEOs face incessant barrage of “go to cloud”, “go digital”.</p>
<p class="para1">CFOs are under tremendous pressure to free-up or find capital in legacy IT to invest in digital, IT modernization.</p>
<p class="para1">CIOs/CTOs are in uneviable position to maintain legacy IT while transforming business for digital, cloud.</p>
<p class="para1">HR is struggling with talent and skills shortage.</p>
<p class="para1">Functional heads are under pressure to show results fast, and unknowingly give out critical information to suppliers.</p>
<p class="para1">Procurement/Sourcing are handed situations after the damage has been done by the organizational silos.</p>
</div>
</div>
</div>
<div class="login" id="theFormID1" action="">
<button type="submit" class="btn btn-warning" id="submit_on1" onclick="window.location.href='setupdiscussion.php'">SET UP A DISCUSSION</button>
</div>
</div>
</div>
</div>
How do I make it like that, can anyone help me?

Answer 1

Change this:
.gray-bg {
background: #F1F1F1 !important;
margin-top: -11vh;
padding: 19.7vh;
}
to
.gray-bg {
background: #F1F1F1 !important;
margin-top: -11vh;
padding: 19.7vh;
height: 900px;
overflow: hidden;
}
If you want to have a different height just change height: 900px; to height: what you want; and make sure that every grey section has the class gray-bg. You also might want to add overflow: hidden; to ensure that no content spills out of the div.
Snippet:
body {
font-family: Montserrat;
}
/*.paddingTB60 {padding:100px 0px 60px 0px;}*/
.gray-bg {
background: #F1F1F1 !important;
margin-top: -11vh;
padding: 19.7vh;
height: 900px;
overflow: hidden;
}
p {
overflow: hidden;
color: #0a2240;
text-align: center-left;
font-size: 12pt;
font-weight: 600;
word-spacing: 2px;
}
.para1 {
overflow: hidden;
color: #0a2240;
text-align: center-left;
font-size: 12pt;
font-weight: 600;
word-spacing: 2px;
margin-left: -2.5vh;
}
.paddingTBB {
padding-top: 95px;
padding-bottom: 30px;
}
.paddingTB {
margin-top: 50px;
}
.paddingTBq {
margin-top: 50px;
}
.paddingTBq2 {
margin-top: 100px;
}
<div id="backtop">▲</div>
<div id="zub" class="about-section paddingTB60 gray-bg">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class=" about-title clearfix">
<div class="col-md-5 col-sm-5 how-img text-center">
<img src="img/teamweserve.png" class="img-fluid" alt="" />
</div>
<div class="col-md-7 col-sm-7">
<h1 class="tws">TEAMS WE SERVE</h1><br>
<p class="para1">CEOs face incessant barrage of “go to cloud”, “go digital”.</p>
<p class="para1">CFOs are under tremendous pressure to free-up or find capital in legacy IT to invest in digital, IT modernization.</p>
<p class="para1">CIOs/CTOs are in uneviable position to maintain legacy IT while transforming business for digital, cloud.</p>
<p class="para1">HR is struggling with talent and skills shortage.</p>
<p class="para1">Functional heads are under pressure to show results fast, and unknowingly give out critical information to suppliers.</p>
<p class="para1">Procurement/Sourcing are handed situations after the damage has been done by the organizational silos.</p>
</div>
</div>
</div>
<div class="login" id="theFormID1" action="">
<button type="submit" class="btn btn-warning" id="submit_on1" onclick="window.location.href='setupdiscussion.php'">SET UP A DISCUSSION</button>
</div>
</div>
</div>
</div>

Answer 2

You can create a common class with the height whatever you want and add that class to all sections.