動態div底部

我有三個div：頭部，腳和文本框。頭和腳的div是固定位置，第三個div是部分固定的（margin-top）。動態div底部

我的問題是：如何更改文本框的div底部以修復不同的顯示器大小？我不能使用100％的高度，因爲它掛在步行div。在這個主頁上，我不使用滾動條，因爲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

你可以使用JavaScript來實現這一點。在下面的腳本添加到您的頭上：

<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通過從你的其他divs的高度/填充和抵消它來實現你想要的。

編輯：

也爲文本框，去掉邊距：100像素;並用top代替：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

回答

相關問題