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>