HTML이 사용 가능한 전체 공간을 채우지 못합니다.

내 "html"div (다른 페이지는 무엇인지 모르겠 음)가 전체 페이지를 채우지 않습니다. 수평으로는 확장 할 수 있지만 수직으로는 확장 할 수 없습니다. "html"div를 검사하고 충분히 아래로 스크롤하면 "html"div 외부에있는 약 1000 픽셀의 공간이 있습니다. 이상한 점은이 공간에 다른 div가 있다는 것입니다 ... html이없는 곳에 어떻게 존재할 수 있는지 이해할 수 없습니다.HTML이 사용 가능한 전체 공간을 채우지 못합니다.

이것이 문제가되는 이유는 페이지 하단에 바닥 글을 고쳐야한다는 것입니다.하지만 그것은 단지 내 html 하단에 고정되어 있기 때문에 모든 위치에 배치되지 않습니다. 바닥, 그래서 그것은 다른 divs를 가로 지른다.

분명히 '페이지'는 전체 페이지을 의미합니다. 현재 브라우저 창에서 볼 수있는 부분뿐만 아니라 가능한 모든 픽셀을 가로 또는 세로로 스크롤하여 볼 수 있습니다 (). 꼬리말의 위치를 고정으로 변경하는 것은 해결책이 아닙니다.

custom.css :

@import "bootstrap"; 

html { 
    height: auto; 
    width: 100%; 
} 

body { 
    height: 100%; 
    width: 100%; 
    background: blue; 
    position: relative; 
} 

#footer { 
    position: absolute; 
    width: 100%; 
    height: 60px; 
    bottom: 0; 
    background: green; 
}

application.html.erb 나는 HTML의 height: 100%를 설정하면 그것도가되도록, 그것은 분명히 그냥 눈에 보이는 화면을 채 웁니다

<!DOCTYPE html> 
<html> 
<head><!--...--></head> 
<body 
    <!--...--> 
    <div id="footer"></div> 
    <div class="container"><%= yield %></div> 
</body> 
</html>

더 작다.

이상하게도, 몸이 페이지 전체에 걸쳐 있지 않더라도 몸체가 background: blue이되어 전체 페이지가 파란색으로 바뀝니다. 낯선 사람이 여전히 신체의 background 속성을 제거하고 대신 html의 background: blue을 설정하면 html의 범위는 흰색으로 유지되지만 html에 포함되지 않은 나머지 페이지는 파란색으로 변합니다.

누구나 내가 전체 페이지를 html로 채울 수있는 방법을 알고 있습니다.

출처

2015-02-01 Joe Morano

반대 문제가 있습니다. 높이 채우지 만 너비는 고정되어 있습니다. 폭/높이 100 %의 모든 변형을 시도했습니다. 우리 모두를위한 솔루션을 찾으십시오! –

업데이트 : 요소 (컨테이너 및 바닥 글)의 순서를 변경하고 다음 CSS (CodePen)를 사용해보십시오.

<html> 
    <head></head> 
    <body> 
     <div class="container">Something in my container</div> 
     <div id="footer">Something in my footer</div> 
    </body> 
</html> 

body { 
    background: blue; 
} 

.container { 
    height: 980px; 
    background-color: red; 
    float: left; 
    width: 100%; 
} 

#footer { 
    clear: left; 
    height: 60px; 
    background: green; 
}

바닥 글을 고정 위치로 설정하고 하단을 0px로 설정해보십시오. 당신은 내가 당신이 질문하는 것으로 이해할 수있는 HTML이나 몸으로 여기에 대해 궁금해 할 필요가 없습니다.

출처

2015-02-01 22:19:54

죄송합니다. 더 명확하지 않았습니다. _page_가 아니라 _page_의 하단에 바닥 글을 넣고 싶습니다. 그러나 더 큰 문제는 html이 있어야하는 모든 공간을 차지하지 않는다는 것입니다. –

HTML 요소가하는 일을 오해하고 있다고 생각합니다. 페이지의 부모 요소입니다. 즉, 페이지를 기본적으로 채 웁니다. 꼬리말과 컨테이너 요소는 자식 요소입니다. 그것들은 네이티브 또는 너비/높이 100 %/auto로 지정된 전체 창을 채 웁니다. 꼬리말을 페이지 하단에 배치하려면 컨테이너를 바닥 글 위로 이동하여 부동시킨 다음 바닥 글의 부동을 지울 수 있습니다. 나는 이것을 보여줄 나의 대답을 업데이트했다. –

T는이

body { 
 
    width: 100%; 
 
    background: blue; 
 
    position: relative; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    bottom: 0; 
 
    background: green; 
 
}

<body <!--...--> 
 
    <div id="footer"></div> 
 
    <div class="container"></div> 
 
</body>

출처

2015-02-01 22:34:17 Adi

바닥 글이 보이지 않는 _ 화면 _이 아니라 _ 페이지 _의 맨 아래에 있습니다. 따라서 사용자가 이동할 수있을 때까지 사용자가 아래로 스크롤해야 볼 수 있어야합니다. –

당신이 컨테이너 아래에 바닥 글을 이동할 수 문제 해결할 것 같아? 꼬리말의 위치를 제거합니다.

<body> 
    <div class="container"><%= yield %></div> 
    <div id="footer"></div> 
</body>

출처

2015-02-01 22:52:19 Sam

내 웹 사이트를 볼 때이 문제가 발생했습니다. html이 장치 뷰포트의 전체 크기가되도록 HTML에 태그가 필요했습니다. 나는이 꼬리표를 꼬리표 바로 뒤에 붙이고 꼬리표 앞에 붙인다.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

희망이 있습니다.

출처

2016-06-30 00:50:24

HTML이 사용 가능한 전체 공간을 채우지 못합니다.

답변

관련 문제