HTML 높이 버퍼 영역

이야기 내용은 다음과 같습니다.HTML 높이 버퍼 영역

홈페이지 내용은 메뉴와 클라이언트 로고로 구성되어 있습니다. 하지만 내가 디자인 한 방식대로 브라우저 창 중앙에 콘텐츠가 있어야합니다. 따라서 모든 사람들이 화면 높이가 다르기 때문에 웹 사이트를 보는 모든 사용자는 화면 아래에 너무 많은 공백이 있습니다. 바닥 글 또는 내용의 일부가 잘립니다.

http://thinkinternational.co/ 그래서 내 생각은이이었다 수정 : 아래의 코드에서 볼 수 있듯이 나는, 몸 위의 완충 지대를 만들어 을,하지만 난에 발견 한 문제

이

는 웹 사이트입니다 div 높이로 백분율을 갖는 것은 부모 div가 먼저 특정 높이를 가져야한다는 것입니다. 불행히도, 나는 전지하지 않으며,이 웹 사이트를 보는 모든 사람들을위한 모든 화면 크기를 예측할 수는 없으므로 특정한 높이를 줄 수는 없습니다. 처음.

동시에, 나는 몸과 함께 아래로 이동하는 배경이 필요합니다. 그냥 물건을 흔들어.

이 문제에 대한 해결책은 무엇입니까 ??

<div id="main"> 
    <div id="TopBuffer"></div> 
    <div id="body" class="clearfix"> 
     Content Here 
    </div> 
</div> 


body { 
    background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed; 
    -moz-background-size: inherit; 
    -o-background-size: inherit; 
    -webkit-background-size: inherit; 
    background-size: inherit; 
    height: 100%; } 

main { color:#000; font-family:Arial,Geneva,sans-serif; margin:15px 0;height: 100%; } 

TopBuffer { width:100%; height:25%; }

출처

2012-07-20 Nona Dobbs

에 따라 버퍼를 설정 부모는 특정한 키가 필요합니다. height:100% (body)은 html에도 넣을 수 있습니다.

body{ 
    background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed; 
}

: 당신이 CSS이 줄을 변경해야합니다,

html{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
}

을 (나는 또한 html에서 마진과 패딩을 제거하는 것) 그리고 당신의 배경이 끝까지 늘릴 수 있도록 원하는 해상도에 따라 center -150px을 center center, center top 또는 center bottom으로 변경하면 더 큰 해상도로 전체 이미지를 표시 할 수 있습니다.

처음으로 center은 배경의 가로 위치이고 두 번째는 세로 위치입니다. 위대한

Vertical Centering With CSS

출처

2012-07-20 10:14:30 Dan

, 나는 그것을 좀 더 플레이해야 ... 감사합니다, 그리고에 몇 화면에서 테스트 : 콘텐츠를 중심에 관해서는

수직이 좋은 기사입니다 작동하는지 확인하고 백분율을 조정하십시오. 배경 tho에 대한 –

, 기본적으로 콘텐츠와 정확히 일치시킬 수 있습니까? 클라이언트는 큐브의 TOP 행에 메뉴를 표시하려고합니다. –

@ NonaDobbs 콘텐츠가 세로로 가운데에 있고 배경이 모든 화면에 표시되어야하는 경우 두렵습니다. 옵션 중 하나를 포기해야합니다. – Dan

당신은, 당신은 자바 스크립트를 사용할 수있는 경우 브라우저의 높이를 얻을 수 window.outerHeight을 사용하고 말했듯이 비율 작업과 높이를 만들기 위해, 그 사용하여 자바 스크립트 또는 JQuery와

출처

2012-07-20 10:14:22

HTML 높이 버퍼 영역

답변

관련 문제