html - 显示元素后未调整 Div 高度

Question

我有一个由 angularjs 提供支持的页面，它执行一个功能。
基于此功能，填充默认隐藏的 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>

Answer 1

#recipeInstructions 是 float 的，所以你需要清除它的父级。

您可以创建一个 .clearfix 类并将其应用于具有 float 子项的父级，或者您可以将此 .clearfix CSS 应用于 #recipeMainBody

* {
  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;    
}

.clearfix:after {
    display: table;
    content: '';
    clear: both;
}

<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" class="clearfix" 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>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>
          <li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
            {{ instruction.Step + '. ' + instruction.Text }}
          </li>

        </div>
      </div>
    </div>


  </div>