Question

我有页眉和页脚。在中间是一个恒定的左右部分，在中间是我的内容部分。内容部分的高度正在发生变化。当内容部分的高度超过最小高度时，我试图将页脚放置在内容部分之下，我没有成功。

这是我尝试的代码：

＆＃13;

<html>
    <head>
    <style>
    #page{
    	width:800px;
    	border:1px solid black;
    	margin:5px auto;
    	background:#e2ebed;
    }
    
    #header{
    	height:100px;
    	background:yellow;
    }
    
    #center{
    	min-height:300px;
    	background:lightblue;
    }
    
    #left{
    	float:left;
    	width:150px;
    	background:aquamarine ;
    }
    
    #content{
    	float:left;
    	width:500px;
    //	min-height:300px;
    	background:cornflowerblue;
    }
    
    #right{
    	float:left;
    	width:150px;
    	background:aquamarine;
    }
    
    #footer{
    	height:50px;
    	background:red;
    }
    </style>
    </head>
    <body>
    <div id="page">
    	<div id="header">
    		Header
    	</div>
    
    	<div id="center">
    		<div id="left">
    			Left
    		</div>
    
    		<div id="content">
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    			Content<br>
    		</div>
    
    		<div id="right">
    			Right
    		</div>
    	</div>
    
    	<div id="footer">
    		Footer
    	</div>
    <div>
    </body>
    </html>

＆＃13;

Answer 1

你需要清除浮动，所以我添加了这个规则

#center:after{
  content: '';
  display: table;
  clear: both;
}

示例代码段

＆＃13;

#page{
    width:800px;
    border:1px solid black;
    margin:5px auto;
    background:#e2ebed;
}
#header{
    height:100px;
    background:yellow;
}
#center{
    min-height:300px;
    background:lightblue;
}
#center:after{
  content: '';
  display: table;
  clear: both;
}
#left{
    float:left;
    width:150px;
    background:aquamarine ;
}
#content{
    float:left;
    width:500px;
    min-height:300px;
    background:cornflowerblue;
}
#right{
    float:left;
    width:150px;
    background:aquamarine;
}
#footer{
    height:50px;
    background:red;
}

＆＃13;

<div id="page">
    <div id="header">
        Header
    </div>
    <div id="center">
        <div id="left">
            Left
        </div>
        <div id="content">
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
        </div>
        <div id="right">
            Right
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
<div>

＆＃13;

当内容的高度大于最小高度时

1 个答案: