Div가 포함 된 div (배경)에서 전체 높이 가져 오기

다음과 같은 문제가 있습니다.Div가 포함 된 div (배경)에서 전체 높이 가져 오기

내 새 웹 사이트를 만들 때 트위터 부트 스트랩을 사용하고 있지만 배경이 어려움. 다음은 내가 가지고있는 것입니다 :

<body> 
    <div class="wrapper"> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
       ... 
     </div> 
     <div id="header"> 
      ... 
     </div> 
     <div id="content"> 
      ... 
     </div> 
     <div class="push> 
     </div> 
    </div> 
    <div class="footer"> 
     .... 
    </div> 
</body>

navbar가 고정되어 있습니다. (고정 된 높이) 머리글 (제목 물건) 페이지와 스크롤 및 고정 된 높이입니다. 바닥 글이 페이지 하단에 있지만 내용이 더 많으면 스크롤됩니다 (하단 고정 높이가 아닌 경우)

원하는 내용은 모든 사용 가능한 공간을 차지하는 배경을 가지고 있습니다. 바닥 글까지 헤더) Image to clarify

Full HTML & CSS(without bootstrap css) code

출처

2013-01-04 Cpt_superfly

그래서 당신은 콘텐츠 영역은 적어도 100 % 이하 헤더를하고 말하자면 바닥 글 싶어?

이

내가 어떻게 할 것입니다 :

데모 : http://jsbin.com/ofijap/1/edit

.head { 
    height:100px; 
    background-color:green; 
} 
.wrap { 
    min-height:100%; 
    background-color:red; 
} 
.footer { 
    height:100px; 
    background-color:grey; 
    margin-top:-100px; 
} 
.content { 
    padding-bottom:100px; 
} 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <div class="wrap"> 
     <div class="head">Head</div> 
    <div class="content">content</div> 
    </div> 
    <div class="footer">footer</div> 
</body> 
</html>

편집 : 엄지 손가락의 규칙으로

, 모든 수직 공간을 채우기 위해 뭔가를하려는 경우 아마도 최소 높이 : 100 %; 그러나 상위 요소도 높이가 100 %이어야하며 body 요소까지 확장해야합니다. 내 최종 결과를보고 싶은 사람들에게

출처

2013-01-04 10:57:36 user1721135

HTTP 참조 : //jsbin.com/ipecuc/1/edit 이것이 내가 당신의 붙여 넣기 저장소에서 얻는 것입니다,하지만 내 asp.net MVC4 웹 사이트에서는 '하얀'부분을위한 전체 높이를 차지하지 않습니다. 또한 jsbin에서는 화면보다 많은 콘텐츠를 얻을 수 있습니다. 이미지 : http://www.sharepic.org/public/view/full/171 –

빨간색 부분은 흰색 부분이 아니라 스타일 부분으로 사용하십시오. 실제 내용이 투명한 부분을 흰색으로 설정하고 스타일을 지정하기 위해 빨간색 요소 인 – user1721135

을 사용하여 어떻게 가운데 부분을 흰색으로해야합니까? 여전히 왼쪽과 오른쪽 여백에 빨간색을 유지합니다 (화면 크기에 따라 가변적이며 100px로 유지됩니다) –

: @ user1721135 덕분에) http://jsbin.com/udoxet/2/edit

지금 난거야 시도하고 내 자신의 웹 사이트에 포트가 그 작동하는 경우 :

출처

2013-01-04 12:21:15

Div가 포함 된 div (배경)에서 전체 높이 가져 오기

답변

관련 문제