我有一个由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>
答案 0 :(得分:1)
#recipeInstructions
已浮动,因此您需要清除它的父级。
您可以创建一个.clearfix
课程并将其应用于有浮动儿童的家长,或者您可以将此.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;
}
&#13;
<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>
&#13;