1
我有一個由angularjs支持的頁面，它執行一項功能。
基於此功能，默認情況下隱藏的div將被填充，然後顯示給用戶。在顯示元素後未調整div高度
問題是，當顯示此文本時，包含我的頁面內容的主div似乎沒有調整大小，因此當頁腳向下移動時很好，它留下了一個巨大的醜陋空白，如下所示。
功能之前：
功能後：
如何確保主網頁內容的div調整大小以適應這一新的內容？
CSS：
* {
margin: 0;
}
#body{
background-color: #EAFFE5;
margin: 0px;
padding: 0px;
font-family: Calibri;
}
.content{
width:85%;
border: 0px solid #000;
margin: 0px auto 0px auto;
clear: both;
text-align: center;
min-height: 700px;
}
.content a:link,
.content a:visited{
color:blue;
}
.display{
width: 90%;
border: 0px solid #000;
margin: 0px auto 0px auto;
clear:both;
text-align: justify;
}
HTML：
<div id="body" ng-controller="recipeSubmitController">
<div class="content">
<title>Submit a recipe</title>
<h3>Recipe Submission</h3>
<div class='display'>
<form name="recipeSubmitForm">
<p>Recipe Title: *</p>
<input type ='text' maxlength="200" id="titleInput" class="forminput" ng-model="titleInput"style="float:left;" placeholder="Paste or write recipe title here." required>
<br>
<br>
<p>Ingredients: *</p>
<textarea rows="5" maxlength="3600" class='formtextarea' ng-model="ingredientsInput" placeholder="Paste or write recipe ingredients here." required></textarea>
<br>
<br>
<p>Instructions: *</p>
<textarea rows="5" maxlength="3600" class='formtextarea' ng-model="instructionsInput" placeholder="Paste or write recipe instructions here." required></textarea>
<br>
<br>
<button id="basicRecipeSubmitButton" class="buttonstyled" style="float:right;" ng-click='basicRecipeSubmitClicked()'>Submit data</button>
<br>
<br>
</form>
<br>
<br>
<div id="recipeMainBody" ng-show="parsedDataShown" ng-cloak="true">
<h4>Here's a sneak peek of how the recipe will look:</h4>
<br>
<h4><span ng-bind="recipeObject.title"></span></h4>
<div id="recipeSideInfo" style="float:left; width:20%; text-align: left;">
<h4>Ingredients:</h4>
<li ng-repeat="ingredients in recipeObject.ingredients | orderBy:'-Amount'">
{{ ingredients.Amount + ' ' + ingredients.Units + ' '+ ingredients.Name}}
</li>
</div>
<div id="recipeInstructions" style="float:right; width:75%">
<h4>Instructions:</h4>
<li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
{{ instruction.Step + '. ' + instruction.Text }}
</li>
</div>
</div>
</div>
</div>