我遇到的问题可能是一些简单的花车。我并排排列了三种形式（我还没有找到一种相对于某人的分辨率来缩放它们的方法）并且每次显示文本一旦展开。问题是，页面的“内容”区域仅包含浮动，因此它不会扩展到页面的底部。如何实现这一目标的最佳方法是什么？查看页面here可能很有用。
希望这段代码有助于解释我的问题：
HTML + Javascript：
<!DOCTYPE html>
<html lang=eng>
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Slabo+27px">
<link href="../normal.css" rel="stylesheet" type="text/css" title="normal" />
<link rel="alternate stylesheet" type="text/css" href="../nightview.css" title="nightview">
<title>CLIO</title>
</head>
<body>
<div id="wrap">
<div style="text-align: center;">
<button type="submit" onclick="switch_style('normal');return false;" name="theme" value="Standard View" class="btnNormal">Standard View</button>
<button type="submit" onclick="switch_style('nightview');return false;" name="theme" value="Night View" class="btnNightview">Night View</button>
</div>
<header id="header">
<div class="container">
<a href="../index.html"><h1>Chrysostomus Latinus in Iohannem Online (CLIO)</h1></a>
<nav id="nav">
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../about.html">ABOUT</a></li>
<li><a href="../transcriptions.html">TRANSCRIPTIONS</a></li>
<li><a href="../contact.html">CONTACT</a></li>
<li><a href="../login.html">LOGIN</a></li>
</ul>
</nav>
</div>
</header>
<div class="content">
<div class="ex">
<form action="#" method="post" id="demoForm">
<fieldset>
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="TEXT">Montfaucon</option>
</select>
<br>
<p>
<input type="button" id="showTxt" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
</div>
<div class="ey">
<form action="#" method="post" id="demoForm2">
<fieldset>
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="TEXT">Montfaucon</option>
</select>
<br>
<p>
<input type="button" id="showTxt" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
</div>
<div class="ez">
<form action="#" method="post" id="demoForm3">
<fieldset>
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>CLOSE</span>
<legend>Select Translation</legend>
<p>
<select id="scripts" name="scripts">
<option value="TEXT">Burgundio</option>
<option value="text">Montfaucon</option>
</select>
<br>
<p>
<input type="button" id="doLoop" value="Select" />
</p>
<output type="text" size="30" name="display" id="display" />
</p>
</fieldset>
</form>
</div>
<div class="im">
<img src="greek.jpg" alt="Greek Translation" height="400" width="400">
</div>
</div>
<div class="compfooter"><br>
<a href="homily2.html">NEXT</a>
<br>
<br>
</div>
</div>
</body>
<script>
(function() {
// get references to select list and display text box
var sel = document.querySelectorAll('#scripts');
var el = document.querySelectorAll('#display');
var buttons = document.querySelectorAll('input[type="button"');
sel.forEach(function(elem, i){
buttons[i].onclick = function(e){
el[i].value = elem.value;
};
})
}());
</script>
CSS：
.content {
height:relative;
width: 96.9%;
background: white;
background:rgba(255, 255, 255, 0.99);
padding: 1.56%;
font-family: 'Slabo 27px', serif;
font-size: 1.675em;
font-size: 1.5vw;
line-height: 100%;
margin-bottom: 0.9em;
}
.ex
{
display:inline-block;
font-family: 'Slabo 27px', serif;
float: left;
}
.ey
{
display:inline-block;
font-family: 'Slabo 27px', serif;
float: left;
}
.ez
{
display:inline-block;
font-family: 'Slabo 27px', serif;
float: left;
}
.im
{
float: left;
}
form{
display:inline-block;
width: 350px;
font-family: 'Slabo 27px', serif;
font-size: 0.575em;
float: left;
}
.compfooter {
position: relative;
right: 0;
bottom: 0;
left: 0;
margin-top: -3 em;
padding: 0%;
background-color: #222438;
text-align: center;
color: white;
margin: 0 auto;
width: 100%;
font-size: 1.5vw;
clear: both;
z-index: 10;
height: 30%;
}
.compfooter a:link {
text-decoration: none;
color: white;
}
.compfooter a:visited {
text-decoration: none;
color: white;
}
.compfooter a:hover {
text-decoration: none;
color: white;
}
.compfooter a:active {
text-decoration: none;
color: white;
}
select
{
display:auto;
cursor:pointer;
font-family: 'Slabo 27px', serif;
}
#close {
float:right;
display:inline-block;
padding:0px 2px;
background:#fff;
cursor:pointer;
}
#close:hover {
float:right;
display:inline-block;
padding:0px 5px;
background:#ccc;
color:#fff;
}