동적 div 맨 아래쪽

머리, 발 및 텍스트 상자라는 세 개의 div가 있습니다. 머리와 발 div는 고정 위치이며 세 번째 div는 부분적으로 고정되어 있습니다 (여백 위쪽).동적 div 맨 아래쪽

내 질문은 : 어떻게 다른 모니터 크기를 수정하려면 텍스트 상자의 div 하단을 변경할 수 있습니까? 다리 부분에 달려 있기 때문에 100 % 높이를 사용할 수 없습니다. 이 홈페이지에서는 스크롤바를 사용하지 않습니다. 왜냐하면 backgrounk가 이미지 파일을 바꾸기 때문입니다. 나는 어떻게해서 든 마진 - 밑 부분이 모니터의 바닥과의 거리를 유지하도록 만들고 싶다.

<html> 
<head> 
<title>Div bottom</title> 
<style> 
.head{ 
    position:absolute; 
    clear:both; 
    top:0px; 
    right:0px; 
    float:right; 
    width:100%; 
    height:80px; 
    background-color:grey; 
} 
.foot { 
    position:fixed; 
    clear:both; 
    height:35px; 
    right:0px; 
    float:right; 
    width:100%; 
    background-color:grey; 
    bottom:0px; 
} 
.textbox {  
    overflow: hidden; 
    position: relative; 
    padding:20px; 
    border: 1px solid gray; 
    background-color:red; 
    z-index:0; 
    text-align:justify; 
    color:black; 
    line-height: 2em; 
    border-radius: 3px; 
    margin-top:100px; 
    width:910px; 
    margin-left: auto; 
    margin-right:auto; 
} 
</style> 
</head> 

<body> 
<div class="head">HEAD</div> 

<div class="textbox">?</div> 

<div class="foot">FOOT</div> 
</body> 
</html>

이

출처

2013-10-03 Nóra

당신은 .. 당신의 머리에 다음 스크립트를 추가 이러한 목표를 달성하기 위해 자바 스크립트를 사용할 수

<script type="text/javascript"> 
window.onload=resize_height; 

function resize_height(){ 
    var height=0; 
    var divs=document.getElementsByTagName('div'); 
    if(self.innerHeight){ 
     height=self.innerHeight; 
    }else if(document.documentElement && document.documentElement.clientWidth){ 
     height=document.documentElement.clientHeight; 
    }else if(document.body){ 
     height=document.body.clientHeight; 
    } 
    divs[1].style.height=(parseInt(height)-200)+'px'; 
} 

</script>

200은 높이와 패딩과 마진에서 온다, 당신은 동적를 생성 할 수 200에서 다른 div의 높이/패딩을 가져 와서 원하는 값으로 설정하면됩니다.

편집 :

또한, 텍스트 상자를 들어, 마진 탑을 제거 : 100 픽셀; 상단으로 교체 : 100px; ....

당신은 그것을위한 스크립트를 사용할 필요가 없습니다

.textbox { 
    overflow: hidden; 
    position: relative; 
    top:100px; 
    padding:20px; 
    border: 1px solid gray; 
    background-color:red; 
    z-index:0; 
    text-align:justify; 
    color:black; 
    line-height: 2em; 
    border-radius: 3px; 
    /*margin-top:100px;*/ 
    width:910px; 
    margin-left: auto; 
    margin-right:auto; 
}

출처

2013-10-03 18:27:08

는 here는 '헤더 내용 바닥 글'레이아웃 순수 CSS의 솔루션입니다.

섹션 사이의 여백은 선택 사항이므로, 수직 형 &도 수평 가운데 맞춤입니다. 모든 것이 완전히 반응합니다.

HTML :

<div class="Container"> 
    <div class="Header"> 
    </div> 
    <div class="HeightTaker"> 
     <div class="Wrapper Container Inverse"> 
      <div> 
       <div class="Footer"> 
       </div> 
      </div> 
      <div class="HeightTaker"> 
       <div class="Wrapper Content"> 
        <div class="Centered"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

CSS :

* 
{ 
    margin: 0; 
    padding: 0; 
} 
html, body, .Container 
{ 
    height: 100%; 
} 
    .Container:before 
    { 
     content: ''; 
     height: 100%; 
     float: left; 
    } 
.HeightTaker 
{ 
    position: relative; 
    z-index: 1; 
} 
    .HeightTaker:after 
    { 
     content: ''; 
     clear: both; 
     display: block; 
    } 
.Wrapper 
{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 
.Inverse, .Inverse > * 
{ 
    -moz-transform: rotateX(180deg); 
    -ms-transform: rotateX(180deg); 
    -o-transform: rotate(180deg); 
    -webkit-transform: rotateX(180deg); 
    transform: rotateX(180deg); 
} 

/*For Centering only*/ 
    .Content:before 
    {  
     content: ''; 
     display: inline-block; 
     height: 100%; 
     vertical-align: middle; 
     margin-left: -5px; 
    } 
    .Centered 
    { 
     display: inline-block; 
     vertical-align: middle; 
    } 


/*For demonstration only*/ 
p 
{  
    font-size: 1.3em; 
} 

.Important 
{ 
    font-weight: bolder; 
    color: white; 
} 

body > .Container 
{ 
    padding: 0 5px; 
    text-align: center; 
} 

.Header, .Footer 
{ 
    margin-bottom: 5px; 
    padding: 5px 0; 
} 
.Header 
{ 
    background-color: #bf5b5b; 
} 
.Content 
{ 
    background-color: #90adc1; 
} 
.Footer 
{ 
    background-color: #b5a8b7; 
}

출처

2013-10-03 21:19:54 avrahamcool

동적 div 맨 아래쪽

답변

관련 문제