이 페이지 레이아웃이 있고 콘텐츠 영역을 확장하고 바닥 글을 페이지 하단에 표시하여 높이의 100 %를 차지하도록 노력하고 있습니다. 그러나 어떤 이유로 콘텐츠 영역이 확장되지 않습니다. 코드를 변경해야하는지 아십니까?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
그리고 여기에 CSS가 있습니다.
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
감사
귀하의 코드는 제거 div하지 않고 추가 로 class문제를 해결합니다.
.footerCSS 업데이트 :
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
또는
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
도움말 링크
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다