3
완벽하게 표시되도록 div를 코딩했습니다. 올바른 div는 서로 위/아래에 있으며 페이지의 전체 너비에 걸쳐 있습니다. 제가 발견 한 것은 페이지의 전체 높이에 걸쳐 있지 않다는 것입니다. 어떤 충고라도 대단히 감사하겠습니다! 또한, 나는 멀리 가고 싶을 수평 스크롤 막대가 있습니다. :)CSS - 페이지의 전체 높이를 스팬으로 분할합니다.
CSS :
body {
color: #333;
font-size: 11px;
font-family: "Myriad Pro", Arial, Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
position: relative;
}
.container_16 {
margin-left: auto;
margin-right: auto;
width: 960px;
margin-top:0px;
padding-top:0px;
min-height:800px;
background-image:url(../images/Content_bkg.gif);
box-shadow: 0px 0px 15px rgb(0,0,0);
-webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
}
.container_24 {
background-image: url(../images/headerFooter_bkg.gif);
height: 60px;
margin: 0px;
padding: 0px;
border: 1px solid rgb(71, 89, 32);
box-shadow: 0px 0px 15px rgb(0,0,0);
-webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
position:relative;
width:100%;
}
HTML :
<body>
<div class="container_24">
<div class="grid_16">
<input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
</div>
</div>
<div class="container_16">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="Body" runat="server">
</asp:ContentPlaceHolder>
</form>
</div>
<div class="container_24"></div>
</body>
UPDATE : 이 내 코드는 아래에 제공 래퍼 개념 모습입니다.
.wrapper{
height:100%;
}
.container_16 {
margin-left: auto;
margin-right: auto;
width: 960px;
margin-top:0px;
padding-top:0px;
background-image:url(../images/Content_bkg.gif);
box-shadow: 0px 0px 15px rgb(0,0,0);
-webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
}
.container_24 {
background-image: url(../images/headerFooter_bkg.gif);
height: 60px;
margin: 0px;
padding: 0px;
border: 1px solid rgb(71, 89, 32);
box-shadow: 0px 0px 15px rgb(0,0,0);
-webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
position:relative;
width:100%;
}
HTML :
이<body>
<div class="wrapper">
<div class="container_24">
<div class="grid_16">
<input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
</div>
</div>
<div class="container_16">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="Body" runat="server">
</asp:ContentPlaceHolder>
</form>
</div>
<div class="container_24"></div>
</div>
</body>
스크린 샷 : 당신이 명시 적으로 각 컨테이너에 height을 준
첫 번째 힌트를 내놓았다 : 보라. 디버깅하는 것이 고통스럽고 지저분한 코드를 만듭니다. 'container_16'에 대한 CSS 정의가 있지만 해당 div에 인라인 스타일이 있습니다. –
고마워요. 나는 심지어 거기에 넣는 것을 잊어 버렸습니다. :) 나는 그것을 제거하고 위의 내 코드를 업데이 트하고 있습니다. – Yecats