2014-01-27 3 views
0

사용자가 페이지를 방문하면 "검색"이 포함 된 컨테이너가 전체 페이지를 차지하도록합니다.CSS : 높이 : 100 % 컨테이너의 초기 페이지로드에는 신뢰할 수 있습니까?

충분히 쉬운 : 높이 : 100 %;

사용자가 원하는 경우 내용을 아래로 스크롤하고 나머지 내용을 봅니다.

이 사실 너무 좋은 것 같습니다 해당 인스턴스 중 하나입니다 ...

아마도 많은 경우에

이에는 ... 사용자가 아래로 스크롤하고 페이지가 더 큰 얻을 것이다 좋은 해결책?

코드 :

패딩 및 여백 : 여백이 적용에 따라 height:100% 이러한 의지 엉망 당신이 조심해야 할

.ss_search{ 
    clear: both; 
    margin-top: 25px; 
    height: 100%; 
} 
+0

당신은 어쩌면 ... –

+0

을 평가하는 코드를 작성하십시오 : 당신은 당신이 전체 화면 빨간색 영역을 볼 수 스크롤 할 때 그런 다음, 전체 화면 녹색 영역입니다. 나는 그것을 충분히 좋은 시나리오라고 부를 수 있다고 생각한다. 매우 감사. –

답변

2

몇 가지. 예를 들어 h1div에 넣고 height:100%을 입력하면 h1의 여백으로 인해 문제가 발생할 수 있습니다. 참고 : html (또는 body, 어느 것을 잊어 버릴지)도 5px 또는 10px 패딩이 있습니다. HTML에

높이/몸는 : 브라우저에 따라 당신은 div 100 % 않을 height:100%로 발생할 수 있습니다. htmlbody을 100 % 높이로 설정해야 할 수 있습니다. 이것은 내가 보통하는 일이다.

더 이상 생각할 사항이 없습니다. 이것 좀보세요.

<html> 
    <head> 
     <style> 
     html, body { 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
      width: 100%; 
     } 

     .full { 
      height: 100%; 
      width: 100%; 
     } 

     </style> 
    </head> 
    <body> 
     <div class="full" style="background:green"> 

     </div> 
     <div class="full" style="background:red"> 

     </div> 
    </body> 
</html> 
+0

그게 멋진 최대 높이를 설정할 수 – Orangeman555