0
페이지 스타일을 매우 가깝게하려고하지만 한 가지 측면에서 약간 혼란 스럽습니다. 내 pageWrapper div는 고정 된 상단이 49px이고 현재 고정 된 하단이 39px 인 공간의 100 %를 차지하도록 설정됩니다. 이렇게하면 원하는 효과에 매우 가깝게 렌더링되지만 혼란스러운 부분은 내 바닥 글 div의 높이가 24px로 설정되어 있다는 것입니다. 여분의 15 픽셀이 어디에서 오는지 알고 싶습니다. 나는 이것이 내 researchTitle div 클래스의 제품이라고 생각하지만, 이것은 div를 포함하고있는 자식 요소이며, 이런 식으로 부모 요소에 영향을 주어서는 안된다. 아래는 researchTitle가 15 픽셀 높이가 100 % 가고 큰 조건 클래스를 일으키는 원인이 100 %에 그것을 만들기 위해 설정되어있는 동안CSS 레이아웃 문제
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Question.aspx.cs" Inherits="Question" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#header
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 49px;
background: red;
overflow: hidden;
}
#pageWrapper
{
position: absolute;
height: auto;
top: 49px;
bottom: 39px;
left: 0px;
width: 100%;
}
#questionTop
{
overflow: auto;
position: relative;
left: 0;
width: 100%;
height: 40%;
background: blue;
overflow: auto;
}
#questionBottom
{
position: relative;
left: 0;
width: 100%;
height: 35%;
background: green;
overflow: auto;
}
#questionResearch
{
position: absolute;
left: 0;
width: 100%;
height: 25%;
}
#terms, #refs, #auth
{
position: absolute;
height: 100%;
}
#terms
{
left: 0;
width: 34%;
}
#refs
{
left: 34%;
width: 33%;
}
#auth
{
left: 67%;
width: 33%;
}
.researchTitle
{
position: relative;
top: 0;
height: 15px;
background: #999;
width: 100%;
}
.researchContent
{
position: relative;
overflow: auto;
background: #99C;
width: 100%;
height: 100%;
}
#footer
{
position: absolute;
left: 0;
width: 100%;
height: 24px;
bottom: 0;
background: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="header">
Header
</div>
<div id="pageWrapper">
<div id="questionTop">
<p>
First</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Last</p>
</div>
<div id="questionBottom">
<p>
First</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Last</p>
</div>
<div id="questionResearch">
<div id="terms">
<div class="researchTitle">
Terms</div>
<div class="researchContent">
<p>
First</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Last</p>
</div>
</div>
<div id="refs">
<div class="researchTitle">
Refs</div>
<div class="researchContent">
<p>
First</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Last</p>
</div>
</div>
<div id="auth">
<div class="researchTitle">
Authority</div>
<div class="researchContent">
<p>
First</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Item</p>
<p>
Last</p>
</div>
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
대신 데모를 설정할 수 있습니까? – Starx
하단의 39px가 바닥 글의 24px 높이에서 15px 떨어져 있는지 궁금하십니까? – mikevoermans
여분의 15 픽셀이 나타나는 위치는 어디입니까? – Starx