I've got the below layout and all I'm trying to do is get the height of the boxes at the bottom to be sized by the space available in the browser rather than their content.
I thought it'd be a simple 'height:33%' but looks like it'll be something to do with flex box (which I've tried loads of variations on and have not succeeded)?
Help me Obi-Wan Kenobi's you're my only hope... html:
</head>
<body>
<div class="parent">
<h1>Right title</h1>
<h2></h2>
<div class="child">
<h3>Left title</a><br></h3>
</div>
</div>
<div class="box">
<p> <a href="#about" class="btn-get-started">First Button</a></a>
</div>
<div class="box">
<p> <a href="#about" class="btn-get-started">Second Button</a></a>
</div>
<div class="box">
<p> <a href="#about" class="btn-get-started">Third Button</a></a>
</div>
</div>
</body>
css
body {
background: #fff;
color: #666666;
font-family: "Open Sans", sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0px;
}
a {
color: #2822a9;
}
a:hover, a:active, a:focus {
color: red;
outline: none;
text-decoration: none;
}
.parent {
width:100%;
padding:10px;
background-color:#CCCCCC;
position:relative;
}
h1 {
font-size: 5vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
h2 {
font-size: 4vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
.child {
padding: 10px;
width:50%;
height:100%;
background-color:#999999;
position:absolute;
top:0px;
left:0px;
}
h3 {
font-size: 1.75vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
h4 {
font-size: 2vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
.box {
line-height: 1vh;
font-size:2vw;
text-align: center;
border: 1px solid #e6e6e6;
position: relative;
}
.btn-get-started {
font-family: "Poppins", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 2rw;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0s;
margin: 10px;
border: 2px solid blue;
color: blue;
width: 25%;
}
.btn-get-started:hover {
border: 2px solid #2dc997;
}
table, tr, th, td {
position: relative; top: 0; bottom: 0; left: 0; right: 0;
border: 1px solid black;
width:100%;
height:100%
text-align: center;}
Make sure the html element is actually occupying the full screen height. You can then use height: 33% as you mentioned on the box divs. Below I used 28% below to make room for the header "parent" div. I also corrected some html tags.
html
{
height: 100%;
}
body {
background: #fff;
color: #666666;
font-family: "Open Sans", sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0px;
}
a {
color: #2822a9;
}
a:hover, a:active, a:focus {
color: red;
outline: none;
text-decoration: none;
}
.parent {
width:100%;
padding:10px;
background-color:#CCCCCC;
position:relative;
}
h1 {
font-size: 5vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
h2 {
font-size: 4vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
.child {
padding: 10px;
width:50%;
height:100%;
background-color:#999999;
position:absolute;
top:0px;
left:0px;
}
h3 {
font-size: 1.75vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
h4 {
font-size: 2vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
.box {
line-height: 1vh;
font-size:2vw;
text-align: center;
border: 1px solid #e6e6e6;
position: relative;
height: 28%;
}
.btn-get-started {
font-family: "Poppins", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 2rw;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0s;
margin: 10px;
border: 2px solid blue;
color: blue;
width: 25%;
}
.btn-get-started:hover {
border: 2px solid #2dc997;
}
table, tr, th, td {
position: relative; top: 0; bottom: 0; left: 0; right: 0;
border: 1px solid black;
width:100%;
height:100%
text-align: center;
}<body>
<div class="parent">
<h1>Right title</h1>
<div class="child">
<h3>Left title</h3>
</div>
</div>
<div class="box">
<p><a href="#about" class="btn-get-started">First Button</a></p>
</div>
<div class="box">
<p><a href="#about" class="btn-get-started">Second Button</a></p>
</div>
<div class="box">
<p><a href="#about" class="btn-get-started">Third Button</a></p>
</div>
</body>