BlazingTomato BlazingTomato - 4 months ago 7
HTML Question

Forcing HTML table rows to fill screen

I know questions similar to this have been asked many times, and I have tried answer after answer to no avail. I am trying to format an HTML page, and I was attempting to use tables in order to position everything.

So I created a 3x3 grid using tables and filled it with the information I wanted to include. The problem I am running into is that empty cells take up no space which means that rows or columns with empty cells aren't formatted properly.

Is there a way to force my rows to fill the entire height of the window? I'd like to have all 9 'cells' be of equal size.
Thank you!

Below is one attempt at the formatting. I've included borders around the cells to make them more visible and removed the image which is stored on my computer:

<!doctype HTML>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<style>
html {height: 100%; width: 100%;}
body {background-color: black; min-width: 100%; min-height: 100%;font-family: 'Audiowide', Lucida Console, Lucida, sans-serif;}
table {table-layout: fixed; width: 100%; min-height: 100%; border: 1px solid white;}
#outer {width: 100%; height: 100%;}
#img {float: left}
.container {width=33%; height=33%; border-radius: 3px; background-color: #afafaf;}
#inner {}
.text {color: black; font-size: 16px;}
#sub {margin-left:45%; width: 10%; text-align: center; color: black}
#nAcc {margin:auto; text-align: center; color: black}
td, tr {border: 1px solid white;}
.spacing {height=100% width=100%;};
a {text-decoration: none;}

</style>

<title>Ethan's Messenger</title>
</head>
<body>
<div class="spacing">
<table id="outer">
<tr>
<td id="img"><img src="" id="logo" /></td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td>
<div class="container">
<form><table id="inner">
<tr>
<td class="text">Username:</td>
<td><input type="text" style="width:100%"></element></td>
</tr>
<tr>
<td class="text">Password:</td>
<td><input type="text" style="width:100%"></element></td>
</tr>
<tr><td colspan="2"><input type="submit" id="sub"></element></td></tr>
<tr><td colspan="2"><a href="/nAcc/"><p id="nAcc">Create A New Account</p></a></td></tr>
</table></form>
</div>
</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
</table>
</div>
</body>
</html>




html {
height: 100%;
width: 100%;
}
body {
background-color: black;
min-width: 100%;
min-height: 100%;
font-family: 'Audiowide', Lucida Console, Lucida, sans-serif;
}
table {
table-layout: fixed;
width: 100%;
min-height: 100%;
border: 1px solid white;
}
#outer {
width: 100%;
height: 100%;
}
#img {
float: left
}
.container {
width=33%;
height=33%;
border-radius: 3px;
background-color: #afafaf;
}
#inner {} .text {
color: black;
font-size: 16px;
}
#sub {
margin-left: 45%;
width: 10%;
text-align: center;
color: black
}
#nAcc {
margin: auto;
text-align: center;
color: black
}
td,
tr {
border: 1px solid white;
}
.spacing {
height=100% width=100%;
}
;
a {
text-decoration: none;
}

<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>



<div class="spacing">
<table id="outer">
<tr>
<td id="img">
<img src="" id="logo" />
</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td>
<div class="container">
<form>
<table id="inner">
<tr>
<td class="text">Username:</td>
<td>
<input type="text" style="width:100%">
</element>
</td>
</tr>
<tr>
<td class="text">Password:</td>
<td>
<input type="text" style="width:100%">
</element>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="sub">
</element>
</td>
</tr>
<tr>
<td colspan="2">
<a href="/nAcc/">
<p id="nAcc">Create A New Account</p>
</a>
</td>
</tr>
</table>
</form>
</div>
</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
</table>
</div>




Answer

I'm not sure if this is the desired outcome you are looking for but if you change the height of the table to 100vh instead of 100% it will fill the entire view.

Comments