我有三个 div:头、脚和文本框。 头和脚 div 是固定位置，第三个 div 部分固定(margin-top)。
我的问题是:如何更改文本框的 div 底部以固定不同的显示器尺寸？我不能使用 100% 高度，因为它卡在 foot div 上。在这个主页中我没有使用滚动条，因为背景正在改变图像文件。我想以某种方式使边缘底部与显示器底部保持一定距离。
<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>
最佳答案
您可以使用 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 来自高度、填充和边距，您可以通过从其他 div 获取高度/填充并偏移它来动态生成 200 以实现您想要的效果。
编辑:
另外，对于文本框，移除 margin-top:100px；并替换为 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;
}
关于javascript - 动态div底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19166097/