내용 높이가 최소 높이보다 높을 때

-1

머리말과 꼬리말이 있습니다. 중간에 일정한 왼쪽 및 오른쪽 부분, 중간에 내 콘텐츠 부분. 내용 부분의 높이가 변경됩니다. 내용 부분의 높이가 최소 높이보다 높을 때 내용 부분 아래에 바닥 글을 놓으려는 시도가 성공하지 못합니다. 내용 높이가 최소 높이보다 높을 때

이

내 시도의 코드입니다 : 당신은 플로트를 삭제해야

<html> 
 
    <head> 
 
    <style> 
 
    #page{ 
 
    \t width:800px; 
 
    \t border:1px solid black; 
 
    \t margin:5px auto; 
 
    \t background:#e2ebed; 
 
    } 
 
    
 
    #header{ 
 
    \t height:100px; 
 
    \t background:yellow; 
 
    } 
 
    
 
    #center{ 
 
    \t min-height:300px; 
 
    \t background:lightblue; 
 
    } 
 
    
 
    #left{ 
 
    \t float:left; 
 
    \t width:150px; 
 
    \t background:aquamarine ; 
 
    } 
 
    
 
    #content{ 
 
    \t float:left; 
 
    \t width:500px; 
 
    // \t min-height:300px; 
 
    \t background:cornflowerblue; 
 
    } 
 
    
 
    #right{ 
 
    \t float:left; 
 
    \t width:150px; 
 
    \t background:aquamarine; 
 
    } 
 
    
 
    #footer{ 
 
    \t height:50px; 
 
    \t background:red; 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="page"> 
 
    \t <div id="header"> 
 
    \t \t Header 
 
    \t </div> 
 
    
 
    \t <div id="center"> 
 
    \t \t <div id="left"> 
 
    \t \t \t Left 
 
    \t \t </div> 
 
    
 
    \t \t <div id="content"> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t \t Content<br> 
 
    \t \t </div> 
 
    
 
    \t \t <div id="right"> 
 
    \t \t \t Right 
 
    \t \t </div> 
 
    \t </div> 
 
    
 
    \t <div id="footer"> 
 
    \t \t Footer 
 
    \t </div> 
 
    <div> 
 
    </body> 
 
    </html>

출처

2016-06-19 swaenie

'# page 'div가 제대로 닫히지 않았습니다. – Midas

, 그래서 나는이 규칙을 추가

#center:after{ 
    content: ''; 
    display: table; 
    clear: both; 
}

샘플 조각

#page{ 
 
    width:800px; 
 
    border:1px solid black; 
 
    margin:5px auto; 
 
    background:#e2ebed; 
 
} 
 
#header{ 
 
    height:100px; 
 
    background:yellow; 
 
} 
 
#center{ 
 
    min-height:300px; 
 
    background:lightblue; 
 
} 
 
#center:after{ 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 
#left{ 
 
    float:left; 
 
    width:150px; 
 
    background:aquamarine ; 
 
} 
 
#content{ 
 
    float:left; 
 
    width:500px; 
 
    min-height:300px; 
 
    background:cornflowerblue; 
 
} 
 
#right{ 
 
    float:left; 
 
    width:150px; 
 
    background:aquamarine; 
 
} 
 
#footer{ 
 
    height:50px; 
 
    background:red; 
 
}

<div id="page"> 
 
    <div id="header"> 
 
     Header 
 
    </div> 
 
    <div id="center"> 
 
     <div id="left"> 
 
      Left 
 
     </div> 
 
     <div id="content"> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
      Content<br> 
 
     </div> 
 
     <div id="right"> 
 
      Right 
 
     </div> 
 
    </div> 
 
    <div id="footer"> 
 
     Footer 
 
    </div> 
 
<div>

출처

2016-06-19 13:05:20 LGSon

감사합니다 !! 나는이 가능성을 알지 못했습니다 ... – swaenie

@swaenie 환영합니다. 내 대답이 당신의 질문을 해결했다면, 또한 그것을 받아주세요. – LGSon

네 대답이 내 질문을 해결했다. 하지만 죄송합니다. 어떻게 대답합니까? – swaenie

내용 높이가 최소 높이보다 높을 때

답변

관련 문제