动态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

回答

相关问题