CSS, HTML 레이아웃 : (.이 다른 곳 대답하면 내가 주위를 둘러 보았다 및 적용 듯 아무것도 찾을 수 없습니다 사전에 죄송합니다.) 절대 사업부 내부의 상대 사업부는 컨테이너 외부

Question

흐름

내가 레이아웃을 가지고 divs가 적절한 위치에 앉아있는 절대 및 상대 위치 지정은 거의 작동합니다.

http://jsfiddle.net/dex3703/TZzKN/

#centercontainer (빨간색)은 내부의 모든 다른 콘텐츠 앉아 #mainsection (오렌지)을하게하기위한 것입니다. 내가 일을해야한다고 생각 절대 및 상대 위치를 가지고 있지만, 나는이 문제가 :

• #의 mainsection의 하단은 약 20 픽셀로 #centercontainer 넘어 확장.
• 하단, 왼쪽, 오른쪽, 위는 효과가 없습니다. 하단 : 20px를 사용하여 하단을 들어 올리는 기능이 작동하지 않습니다.
• 높이가없는 경우 : # mainsection에 100 % - 내가 잘못 생각하는 경우 - 내부와 divs에는 높이가 없습니다! #contentection의 작은 조각 만이 #mainection 상단에 표시됩니다.

저는 Chrome과 IE9에서만이 작업에 관심이 있습니다. 희망은 그것들을 더 쉽게 만듭니다.

나는 이것이 멍청한 문제라고 확신하므로 미리 감사드립니다. 감사.

Answer 1

#mainsection의 너비와 높이를 100 %로 설정하면 패딩을 제외하고 #centercontainer와 동일한 너비와 높이가됩니다. #centercontainer의 패딩은 왼쪽 및 오른쪽으로 60px이므로 양쪽에 60px가 있습니다.

#mainsection이 #centercontainer 아래로 확장되는 이유는 #breadcrumbcontainer가 40px (#breadcrumbcontainer 높이)만큼 아래로 밀어내는 것입니다. #mainsection에 20px 아래쪽 패딩이 있기 때문에 20px까지만 확장됩니다.

#centercontainer의 하단 패딩을 #breadcrumbcontainer 높이 (# breadcrumb 컨테이너의 상단 및 하단 여백 포함) 높이로 설정하면 문제가 해결됩니다. 그것은 아마도 그것을 고치는 가장 우아한 방법은 아닙니다. 그러나 그것은 효과가있다.

Answer 2

귀하의 CSS를 일부 변경했습니다. 여전히 멋진 스타일 시트는 아니지만 디자인이 더 이상 손상되지 않습니다.

@charset "utf-8"; 

/* 
HTML4 layout 
using absolute positioning to get layout to work without HTML5/CSS flexbox 

colors: 
#1E242D - html frame bg 
#F3F3F3 - left nav 
#FFFFFF - main content, inner menu 
#267EB9 - drawer bg 

#DBDBDB - nav and left nav border 
#4F9DD7 - selected item blue 

#FFFFFF - white text 
#4A4A4A - darkest text, dividers 
#767676 - middle dark text 
#C1C1C1 - light text 

*/ 

html { 
    font-size: 62.5%; 
    height: 100%; 
    background: White; 
    margin: 0; 
} 

body 
{ 
    font-size: 1.2em; 
    font-family: "Segoe UI"; 
    height: 100%; 
    margin: 0; 
} 

p 
{ 
    margin: 0; 

} 

/* from html5boilerplate */ 
nav ul, nav ol 
{ 
    list-style: none; 
    list-style-image: none; 
    margin: 0; 
    padding: 0; 
} 

#layoutdiv 
{ 
    z-index: 100;  
    height: 100%; 
    position: relative; 

} 

#maindiv 
{ 
    margin: 10px 60px; 
    position: absolute; 
    top: 60px; 
} 

header 
{ 
    position: absolute; /* change to absolute positioning */ 
    width: 100%; 
    top: 0; 

    height: 60px; 

} 

header p 
{ 
    color: #FFFFFF; 
} 

header span 
{ 
    vertical-align: middle; 
} 

#logodiv 
{ 
    width: 300px; 
    display: inline-block; 
} 

#notifypanel 
{ 
    width: 40px; 
    position: fixed; 
    left: 0; 
    top: 110px; 
    bottom: 70px; 
    background-color: LemonChiffon; 
} 

#notifypanel img 
{ 
    width: 24px; 
    height: 24px; 
} 

.left 
{ 
    float: left; 

} 

.right 
{ 
    float: right; 

} 

ul 
{ 
    list-style-type:none; 
    list-style: none; 
    margin: 0; 
    -webkit-padding-start: 0;  
    -webkit-margin-before: 0; 
    -webkit-margin-after: 0; 

} 

li 
{ 
    display: inline-block; /*need inline-block or height==0! */  
    cursor: pointer; 
    vertical-align: middle; 
    text-align:center; 

} 

#topnav 
{ 

    /* position: absolute;*/ 
    /*width: 100%;*/ 
    /* top: 55px; with absolute positioning, move its top to the header's bottom */ 
    display: inline-block; 
    vertical-align: top; 
} 

#topnav ul 
{ 

    /*margin-left: 15px;*/ 
    /*height: 100%;*/ 
} 

#topnav li 
{ 
    margin-left: 15px; 
    padding: 5px 10px; 
    font-weight: bold; 
    color: #767676; 
    height: 100%; 
    /*line-height: 5em; for vertical alignment */ 

} 

#topnav li:hover 
{ 
    color: #1E242D; 
    background-color: #F3F3F3; 
} 

#topnav .selected 
{ 
    background-color: #4F9DD7; 
    color: White; 
} 

#centercontainer 
{ 
    position: absolute; 
    overflow:hidden; 
    top: 60px; 
    bottom: 60px; 
    padding: 0 60px 20px 60px; 
    left: 0; 
    right: 0; 

    border: 1px solid red; 

} 

#breadcrumbcontainer 
{ 

    top: 0; 
    height: 40px; 
    width: 100%; 
    margin: 0 0 10px 0; 
    font-family: Segoe UI Light; 
    font-size: 3.6em; 
    line-height: 0.8em; 

} 

#breadcrumb 
{ 
    display: inline-block; 
} 

#viewcontrols 
{ 
    display: inline-block; 
    width: 320px; 
    text-align: right; 
} 

#mainsection 
{ 

    width: 100%; 
    height: auto; /* mainseciton won't display unless 100%, but height is off, doesn't quite sit in containing div */ 
    position: relative; 
    top:30px; 
    background-color: Aqua; 

    border: 2px solid orange; 

} 

#contentsection 
{ 

    position: absolute; 
    left: 220px; 
    bottom: 0; 
    top: 0; 
    padding: 5px; 
    box-sizing: border-box; /* makes padding, margins behave like XAML */ 
    overflow-x: auto; 
    overflow-y: auto; 

    background-color: AliceBlue; /* remove later */ 
    display: inline-block; 

} 

#leftnav 
{ 
    width: 200px; 
    /*position: absolute;*/ 
    left: 0; 
    bottom: 0; 
    top: 0; 
    background: #F3F3F3; 
    overflow-y: auto; 
    display: inline-block; 
} 

#leftnav li 
{ 
    display: block; 
    text-align: left; 
    padding: 7px 0 7px 20px; 
    border-bottom: 1px solid #DBDBDB; 


} 

#leftnav img 
{ 
    display: inline-block; 
    vertical-align: middle; 
    width: 24px; 
    height: 22px; 
} 

#leftnav p 
{ 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0 0 0 10px; 
} 

#leftnav .selected 
{ 
    background-color: #4F9DD7; 
} 

#leftnav .selected:hover 
{ 
    background-color: #4387B7; 
} 

#leftnav li:hover 
{ 
    background-color: #FdFdFd; 
} 


footer 
{ 
    background: #267EB9; 
    height: 60px; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    line-height: 1em; /* vertically centers header content .. see http://phrogz.net/CSS/vertical-align/index.html */ 
    text-align: center; /* centers the center button div */ 
} 

footer img 
{ 
    margin-right: 15px; 
    height: 24px; 
    width: 24px; 
} 

footer p 
{ 
    display: inline-block; 
    margin: 0; 
    vertical-align: super; 
    color: #FFFFFF; 
    font-size: 0.8em; 
} 

.footerleft 
{ 
    margin-left: 20px; 
    position: relative; 
    top: 17px; 
} 

.footerright 
{ 
    margin-right: 10px; 
    position: relative; 
    top: 17px; 
} 

.footercenter 
{ 
    display: inline-block; 
    position: relative; 
    top: 13px; 
} 

.footercenter div 
{ 
    display: inline-block; 
    margin-right: 20px; 
} 

.footercenter p 
{ 
    display: block; 
} 

.footercenter img 
{ 
    margin: 0; 
}