CSS div 높이 100 % 레이아웃

-1

이 코드를 사용하여 내 사이트 레이아웃을 만듭니다. 내 문제는 "왼쪽"과 "오른쪽"div를 화면에 표시하지 않습니다. (내가하지 퍼센트의 픽셀에 자신의 높이를 설정할 때 그들은 표시) 내가 보여주기 위해 할 수있는 일CSS div 높이 100 % 레이아웃

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <style type="text/css" media="screen"> 
    * { 
     margin: 0; 
    } 

    html, 
    body { 
     height: 100%; 
    } 

    #wrapper { 
     min-height: 100%; 
     height:  auto !important; 
     height:  100%; 
     margin:  0 auto -44px; /* -44px being the size of the footer */ 
    } 

    #header { 
     height: 86px; 
    } 

    #footer, 
    #push { 
     height: 44px; 
    } 

    #left 
    { 
     width:8px; 
     width:100%; 
     background-color:blue; 
     float:left; 
    } 


    #right 
    { 
     width:8px; 
     width:100%; 
     background-color:blue; 
     float:right; 
    } 

    #left: first, 
    #right: first, 
    { 
    content: ""; 
    height: 0; 
    clear: both; 
    display: block; 
    } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header">header</div> 
     <div id="content"> 
     <div id="left"></div> 
     content 
     <div id="right"></div> 
     </div> 
     <div id="push"></div> 
    </div> 
    <div id="footer">footer</div> 
</body> 
</html>

출처

2012-06-09 IordanTanev

왼쪽 및 오른쪽 div에는 현재 콘텐츠가 없습니다. 너는 무엇을 기대하고 있니? 나는 그들이 높이가 0이고 그래서 보이지 않는다고 생각한다. – Nick

내 대답을 확인하십시오. @ 닉 내용이 없어도 가능합니다! –

죄송합니다, 무엇을 표시해야합니까? 'float : left'와'width : 100 %'는 다소 모순적입니다! 또한 '왼쪽 : 첫 번째'는 오류입니다. '왼쪽 : 전에 '라는 뜻 이었나요? –

실무 방법 추가

#content {height: 80%;} 
#left, #right {width: 30%; height: 100%;}

나는 아래의 코드를 업데이트하고 전체 파일 게시 :이 방법을 얻을

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <style type="text/css" media="screen"> 
    * { 
     margin: 0; 
    } 

    html, 
    body { 
     height: 100%; 
    } 

    #wrapper { 
     min-height: 100%; 
     height:  100%; 
     margin:  0 auto -44px; /* -44px being the size of the footer */ 
    } 

    #header { 
     height: 86px; 
    } 

    #footer, 
    #push { 
     height: 44px; 
    } 

    #left 
    { 
    width:8px; 
    width:30%; 
    background-color:blue; 
    float:left; 
    height: 100%; 
    } 


    #right 
    { 
    width:8px; 
    width:30%; 
    background-color:blue; 
    float:right; 
    height: 100%; 
    } 

    #left: first, 
    #right: first, 
    { 
    content: ""; 
    height: 0; 
    clear: both; 
    display: block; 
    } 
    #content { 
    height: 80%; 
    } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header">header</div> 
     <div id="content"> 
     <div id="left"></div> 
     content 
     <div id="right"></div> 
     </div> 
     <div id="push"></div> 
    </div> 
    <div id="footer">footer</div> 
</body> 
</html>

을 :이 도움이

Layout

희망을! :)

출처

2012-06-09 05:38:24

안녕 매트, 두 번째 솔루션에서 변경 한 사항을 알려주시겠습니까? 즉 지금 작동하는 이유는 무엇입니까? 이전에는 같은 문제가 있었지만 탈출구를 파악할 수 없었습니다. – Playmaker

당신은 solutuin 내가 "왼쪽"과 "오른쪽"100 % 높이 "contetn"(whitch 고정 된 크기와 nto)을 갖고 싶습니다 달성하려고하지 않습니다. 당신의 솔루션은 "왼쪽"과 "오른쪽"을 바닥 글에도 넣습니다. – IordanTanev

네, 그 경우에는 레이아웃을 정확히 나눌 필요가 있습니다. 어떻게 하시겠습니까? 그들은 바닥 글 오른쪽으로 넘치지 않아야합니다. 단지 컨텐츠의 높이를 100 %로하지 마십시오. Lemme 수표는 당신을 알게한다. –

후 당신은 이러한 클래스를 변경해야

<div id="footer">footer</div>

는

<br style="clear:both;">

출처

2012-06-09 05:27:25 user198989

그 친구는 작동하지 않습니다. –

CSS div 높이 100 % 레이아웃

답변

관련 문제