본문 크기가 100 %가되지 않습니까?

나는 여기 웹 사이트를 가지고있다 : Website 내 몸이 (불투명도 0으로 만들고 싶은 마녀) 전체 사이트가 아니라는 점이 내 문제이다. 그것은 중간에있는 "Block"-Section 다음에 멈 춥니 다. html 부분에서 배경색을 제거하면 본문이 전체 화면으로 다시 표시됩니다. 하지만 다른 이유로 배경색이 필요합니다. (나는 이것을 바꾸고 싶지 않다).본문 크기가 100 %가되지 않습니까?

브라우저로 소스 코드를보고 편집 할 수 있기를 바랍니다.

나는 이런 식으로 원하는 : http://postimg.org/image/j2ec1sl9z/

솔루션을! 나는 지금 내 자신의 질문에 대답하지 못할, 그래서 그것을 이런 식으로 할 필요가 :

그래서, 내가 찾은 내 솔루션은 다음과 같습니다

내가 자바 스크립트와 높이 자동 온로드를 설정합니다.

var wheight = $(window).height(); 
$("body").css("height", wheight);

최상의 해결책은 아니지만 작동합니다.

여러분 모두를 도와 주셔서 감사합니다!

출처

2013-10-16 Dominik Seemayr

http://www.cssreset.com/을 당신이 – Jawad

참조하는 방법은'가'(은'섹션 번호의 block'가) 페이지 아래로 절반 방법을 시작 나타 납니까? – showdev

당신은 전신의 배경만을 필요로합니다 - http://css-tricks.com/perfect-full-page-background-image/ – Jawad

브라우저에 따라 여백과 여백이있는 본문의 기본 스타일을 재설정해야합니다. 따라서 몸에 여백이나 패딩이 없는지 확인해야합니다. 그래서 이것을 시도하십시오.

body { 
    margin: 0; 
    padding: 0; 
}

업데이트 : background-size:cover

html{ 
    background-size: cover; 
    background-image: url(Blurred.jpg); 
}

을 설정 html에 배경 이미지를 추가하고 기존의 섹션 예에서 제거합니다. body 스타일을 지정하지 않으면 두 번 표시됩니다.

하거나 style.css

html { 
background-color: #EDEDED; 
}

출처

2013-10-16 17:53:54 Sachin

고마워, 그것은 왼쪽과 오른쪽에있는 사이트를 채울 것이지만, 나는 또한 어떤 아이디어를 verticaly 필요합니까? –

@DominikSeemayr '세로로'는 무엇을 의미합니까? 이미지의 상단부터 시작해야합니다. 이미지의 높이가 높지 않기 때문에 맨 아래에 공간이 남았습니까? 그렇지? 또는 전체 페이지 배경을 원하십니까? – Sachin

전체 페이지 배경을 원합니다. (업데이트 된 질문) –

주변에서 얻을 수있는 유일한 방법 line 5에서이 줄을 제거 모든 브라우저의 기본 마진과 패딩

body { 
margin: 0; 
body: 0; 
}

이 방법은 모든 여백을 제거하는 것입니다 제거하고, 당신의 몸 꼬리표는 공간을 채울 것이다!

예 :

웹 사이트에서

, 당신은 사용자의 브라우저에서이 여백을주고 있음을 알 수 자체

enter image description here

문제는이 문제가 있다는 것을 의미 user agent stylesheet의 캡션을 가지고있다 사용자의 브라우저에 의해 생성됩니다. 추가되는 여백은 8px입니다.

이제 사용자가 margin: 0을 설정하면 사용자의 스타일 시트가 업데이트되고 사용자가 제공 할 스타일이 사용됩니다. 0입니다.

지금 이미지와 두 번째 오류는 id="Block, 당신이 사용할 수있는 제거 또는 신체의 공간을 채우기 위해 :

을 할 것입니다 그 margin: 0;로 교체 margin-top: 183.5px;로 제공되고 있다는 것입니다 min-width 및 min-height body 태그가 항상 채워 졌는지 확인하십시오.

그런 다음 브라우저 화면의 전체 공간을 채울 이미지를 사용하십시오.

출처

2013-10-16 17:56:17

그것을 가져 가면서'html, body {' –

, 왼쪽, 오른쪽으로 사이트를 채워 주셔서 고맙겠습니다.하지만 아이디어가 필요합니까? –

'html, body {'는 작동해야하지만 어떤 스타일에도 적용되는 HTML이 없었습니다. :) 그래서 질문자를 혼란스럽게하지 않았습니다. –

"margin collapse"과 관련된 문제가있을 수 있습니다. ( 서로 또는 중첩 옆에있을 수 있습니다) 두 개 이상의 상자의

"... 인접 마진 (NO 비어 있지 않은 내용, 패딩, 또는 국경 지역, 또는 틈새 구분)에 결합 단일 마진을 형성합니다. "

자녀 요소 section#block의 margin-top

또한 부모 <body>을 추진하고있다.
대신, padding-top로 변경합니다 :

$(ID).css("padding-top", half + "px");

는 또한 모든 기본 여백을 <html> 및 <body> 약간의 높이를주고 제거 제안/패딩 :

html,body { 
    height:100%; 
    margin:0px; 
    padding:0px; 
}

출처

2013-10-16 18:06:56 showdev

고마워요, 이것은 배경을 상단 사이트에 채웠습니다! 이제 그것을 바닥으로 가져 가야합니다! –

내 대답을 편집했습니다. 'height : 100 %'에 관한 것들. – showdev

작동하지 않습니다 : ( –

나는 내가 어떤 종류의를 제공 할 생각 신체 마진을 재설정하는 대신. 내 사이트 중 하나에서 같은 문제가 발생했습니다. 여백을 다시 설정하지 않고 주위를 돌아 다니는 방법은 높이를 100 %로 설정하는 것입니다.

<body onload="centerVertical('Block')" id="body" style="height:100%">

및

<html style="height:100%">

귀하의 사이트 내에서 수정 사진을 게시 하겠지만 이미지를 게시하려면 10 명이 필요합니다.

function cry(){for(1=1){return tears;}}

출처

2013-10-16 18:29:25 usernolongerregistered

'height'를 설정해도 여백에 영향을 미치지 않고'height : 100 %'와 몇 가지 기본 여백을 설정하면'100 % + margin> 100이기 때문에 항상 수직 스크롤바가 생깁니다. %'. 여기에 삽화 : [this] (http://jsfiddle.net/f2ELg/) vs [this] (http://jsfiddle.net/f2ELg/1/). – showdev

나는 이해하고있다. 문제는 마진에 영향을 미치지 않고 (내 사이트와 마찬가지로 마진도 중요 함) 제안 된 높이 수정은 여백에 영향을주지 않고 전체 페이지, 위, 아래에 배경 이미지를 세로로 당겼다. 그들은 둘 다 마진없이 어지럽히 지 않고 일했습니다. 문제가되지 않았으니, 어쨌든, 혼란에 빠지십시오! – usernolongerregistered

죄송 합니다만, 나는 당신을 오해했을 수도 있습니다. 그러나 계산 된 높이가 ''이되지 않도록 어떻게 마진을 얻었습니까? 일반적으로 'height : 100 %'에 여백을 더한 경우 수직 스크롤바가 나타납니다. 상자 모델을 조정하기 위해 IE (Quirks 모드) 또는 CSS'상자 크기 조정 '을 사용하고 있습니까? – showdev

본문 크기가 100 %가되지 않습니까?

답변

관련 문제