contert_placeholder上的内容在页脚上重叠

时间:2016-05-14 10:51:40

标签: html css asp.net

我正在使用asp.net,我的content_place持有者的内容重叠在我的页脚之外

这是页脚

enter image description here

这是我的css:

import {Router, browserHistory} from "react-router";

...

ReactDOM.render(<DataWrapper data={data}><Router history={browserHistory}>{router}</Router></DataWrapper>, document.querySelector('#app'));

这是content_place holder css

.footer {
   background-color: orange;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align:center;
clear:both;
 height: 50px;
}

我怎样才能让我的页脚粘在底部?或者只是我的制作内容在重叠时停止?

1 个答案:

答案 0 :(得分:1)

<body> css设为position:relative;

添加到您的css:

body {
   position:relative;
   min-height:100%;
   margin:0px;
   padding:0px;
}
html {
   height:100%;
   margin:0px;
   padding:0px;
}

使.footer的绝对位置相对于身体。

如果仅此一点对你没有帮助:

保持身体css和:

您不能将<asp:ContentPlaceHolder>元素的ID用于css设计。原因是<asp:ContentPlaceHolder>永远不会进入客户端的浏览器。这个元素只存在于服务器端,它的目的就像它的名字一样 - 被你给它的内容所取代。

使用<asp:ContentPlaceHolder>元素设计<div>环绕它的内容,然后在<div>上应用css样式。

参见示例:

<div id="content_area_div">
   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      <%--Placeholder for the pages--%>
   </asp:ContentPlaceHolder>
</div>

你的css:

#content_area_div
{
   width:80%; 
   margin-left:10%; 
   margin-right:10%;
   height:100%;
}

在客户端,唯一剩下的就是周围的div和你将推送到<asp:ContentPlaceHolder>的内容

希望它有所帮助!