[英]How to make the height of a div within a master page expand in a content page?
I've got a master page which has a div as a border for the whole page.我有一个母版页,它有一个 div 作为整个页面的边框。
I would like this div to expand depending on content placed in the content page.我希望这个 div 根据内容页面中的内容展开。
How would one go about doing this?怎么做呢? I have no problem using
clear:none
in a div without inheriting the page from a master page (ie without using a master page at all).我没有问题在 div 中使用
clear:none
从母版页继承页面(即根本不使用母版页)。 However, when I use a master page, the div does not expand.但是,当我使用母版页时,div 不会扩展。
Current code in Master page:母版页中的当前代码:
<div class="page-border">
<div class="header">
HEADER</div>
<div class="outer">
<div class="content">
<asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="banner">
BANNER
</div>
<br style="clear:none"/>
</div>
EDIT: I've added the CSS classes below:编辑:我在下面添加了 CSS 类:
.page-border
{
width: 1000px;
padding: 10px;
margin: 0px auto;
border: 1px solid gray;
}
.outer
{
float: left;
padding: 0px;
margin-right: 0px;
margin-top: 10px;
width: 986px;
margin-left: 12px;
}
.content
{
float: left;
height: 503px;
width: 779px;
margin-bottom: 0px;
margin-left: 2px;
}
If the content inside the wrapper div is floated it won't wrap around it. 如果包装div内的内容浮动,则不会环绕它。 Add
overflow:hidden;
添加
overflow:hidden;
or overflow:auto;
或
overflow:auto;
to the .content
CSS declaration to force it to expand along with the content. .content
CSS声明以强制其随内容一起扩展。
If this doesn't, work, we'll need to see the style rules for .content 如果不行,我们需要查看.content的样式规则
<div>
<div class="content">
<asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
<div style='clear:both'></div>
</div>
<div class="banner">
BANNER
</div>
<br style="clear:none" />
</div>
Update of one class: 一类的更新:
.content
{
float: left;
min-height: 503px;
width: 779px;
margin-bottom: 0px;
margin-left: 2px;
}
I had this problem and overflow:auto;我遇到了这个问题并溢出:自动; worked for me.
为我工作。 Thank you so much Nate B!
非常感谢内特 B!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.